Store SQLite database on HTML5

Posted: May 19, 2012 in HTML

Store SQLite database on HTML5

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>SQL Storage</title>
<body>
<br/><br/>
<div align=”center”>
<input type=”hidden” id=”id”/>
First name:<input type=”text” id=”firstName”/><br/>
Last name:<input type=”text” id=”lastName”/><br/>
Phone: <input type=”text” id=”phone”/><br/>
<button onClick=”resetForm()”>Reset Form</button>
<button onClick=”updateRecord()”>Update</button>
<button onClick=”insertRecord()”>Insert</button>
<button onClick=”dropTable()”>Drop Table</button>
<div id=”results”></div>
</div>
</body>

<script>
var results = document.getElementById(‘results’);
var id = document.getElementById(‘id’);
var firstName = document.getElementById(‘firstName’);
var lastName = document.getElementById(‘lastName’);
var phone = document.getElementById(‘phone’);

var createStatement = “CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)”;
var selectAllStatement = “SELECT * FROM Contacts”;
var insertStatement = “INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)”;
var updateStatement = “UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?”;
var deleteStatement = “DELETE FROM Contacts WHERE id=?”;
var dropStatement = “DROP TABLE Contacts”;

var db = openDatabase(“AddressBook”, “1.0”, “Address Book”, 200000);
var dataset;
createTable();

function onError(tx, error) {
alert(error.message);
}

function showRecords() {
results.innerHTML = ”;
db.transaction(function(tx) {
tx.executeSql(selectAllStatement, [], function(tx, result) {
dataset = result.rows;
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
results.innerHTML +=
‘<li>’ + item[‘lastName’] + ‘ , ‘ + item[‘firstName’] + ‘ <a href=”#” onclick=”loadRecord(‘+i+’)”>edit</a> ‘ +
‘<a href=”#” onclick=”deleteRecord(‘+item[‘id’]+’)”>delete</a></li>’;
}
});
});
}

function createTable() {
db.transaction(function(tx) {
tx.executeSql(createStatement, [], showRecords, onError);
});
}

function insertRecord() {
db.transaction(function(tx) {
tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
});
}

function loadRecord(i) {
var item = dataset.item(i);
firstName.value = item[‘firstName’];
lastName.value = item[‘lastName’];
phone.value = item[‘phone’];
id.value = item[‘id’];
}

function updateRecord() {
db.transaction(function(tx) {
tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
});
}

function deleteRecord(id) {
db.transaction(function(tx) {
tx.executeSql(deleteStatement, [id], showRecords, onError);
});
resetForm();
}

function dropTable() {
db.transaction(function(tx) {
tx.executeSql(dropStatement, [], showRecords, onError);
});
resetForm();
}

function loadAndReset(){
resetForm();
showRecords();
}

function resetForm(){
firstName.value = ”;
lastName.value = ”;
phone.value = ”;
id.value = ”;
}
</script>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s