En este artículo vamos a ver algunos datos sobre SQL Web. Sé que todos vosotros estáis familiarizado con SQL, sino os recomiendo leer algunos tutoriales básicos en esta página web. Como su nombre lo indica, Web SQL cuenta con muchas similitudes con SQL. Así que si eres bueno con SQL, también te encantará Web SQL. SQL Web es una API que ayuda a los desarrolladores a realizar operaciones en las bases de datos en el lado del cliente, como por ejemplo crear bases de datos, abrir transacciones, crear tablas, insertar valores en las tablas, borrar dichos valores, leer datos... Si necesitas cualquier otra forma de guardar datos en el lado del cliente, puedes echar un vistazo a los mecanismos de almacenamiento introducidos en HTML5.
Ahora vamos a ver algunas de esas operaciones que un desarrollador puede realizar con SQL Web. Espero que sean de tu grado.
El código
Como todos sabéis, para realizar consultas SQL, debes crear una base de datos. Así que el primer paso que vamos a llevar a cabo, es la creación de una base de datos.
Crear base de datos
Para crear una base de datos con SQL Web, podemos utilizar una función llamada OpenDatabase que cuenta con cuatro parámetros que son los siguientes:
- Nombre de la base de datos
- Número de versión
- Descripción
- Tamaño
- Creación de callback
Ahora vamos a abrir una base de datos Web SQL con los parámetros mencionados anteriormente. Podemos realizarlo mediante la ejecución de una consulta de la siguiente manera.
var myDBInstance = openDatabase('dbSibeeshPassion', '1.0', 'This is a client side database', 2 * 1024 * 1024);
Aquí le he dado un tamaño a mi base de datos de 2 * 1024 * 1024. En la mayoría de los navegadores, el tamaño es flexible, pero pocos mantienen un límite de 5 MB. A partir de la consulta anterior, hemos creado una base de datos SQL Web. Ahora vamos a comprobar si la BD se ha creado con éxito o no.
if (!myDBInstance) {
alert('Oops, your database was not created');
}
else {
var version = myDBInstance.version;
}
Ahora, recibirás una alerta si no se ha creado la base de datos. También serás capaz de obtener información de la versión de la instancia a la base de datos.
Una vez creada la base de datos, podemos empezar a utilizar transacciones, tal y como hacemos habitualmente en SQL.
Creando una transacción
Para crear una transacción podemos utilizar la siguiente sintaxis. Podemos utilizar el método transacción de nuestra instancia a la base de datos.
myDBInstance.transaction(function (tran) {
});
Aquí myDBInstance es nuestra instancia a la base de datos. Y tran es nuestro objeto de transacción que vamos a utilizar para nuestras próximas operaciones. ¿Por qué utilizar transacciones? Como todos sabéis, una transacción lanzada puede ser respaldada. Por ejemplo, si alguna operación arroja cualquier error, la transacción será respaldada, por lo que no habrá ningún tipo de problema de pérdida de datos u otro tipo de error que comprometa la BD. Y por supuesto, podemos gestionar fácilmente los registros de errores con ayuda de las transacciones. Ok, todo claro, ¿podemos empezar a escribir las consultas necesarias para realizar operaciones?
En primer lugar, vamos a crear una tabla en nuestra base de datos. Para ejecutar cualquier consulta en Web SQL, debes utilizar el método executesql.
tran.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, Name, MailID)');
Como puedes ver estamos creando una tabla Users que no existe en la base de datos. Como en SQL, asignamos el ID como unique key.
Lo siguiente que haremos es insertar algunas filas en nuestra tabla.
tran.executeSql('insert into Users (id, Name, MailID) values (1, "Sibi","[email protected]")');
tran.executeSql('insert into Users (id, Name, MailID) values (2, "Aji","[email protected]")');
tran.executeSql('insert into Users (id, Name, MailID) values (3, "Ansu","[email protected]")');
Si quieres asignar un name, mailid, id valores para insertar la query, es muy sencillo crear variables y asignarlas a las consultas como te mostramos a continuación.
var name = "Sibi";
var id = "1";
var MailID = "[email protected]";
tran.executeSql('insert into Users (id, Name, MailID) values (?,?,?)',[id,name,MailID]);
Así que, como puedes ver, hemos insertado algunos valores también. Ahora tenemos que leer los datos que hemos insertado en nuestra tabla, ¿verdad? Para ello podemos utilizar una nueva transacción y ejecutar el comando ExecuteSQL.
tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
});
Con esto, ya obtendremos la salida de los datos. Como puedes ver, he dado una función de callback junto con el comando. Esto puede ser utilizado en bucle para recorrer los datos y mostrarlos en nuestra página. Así podemos modificar nuestro bloque de transacciones de lectura de la siguiente manera.
myDBInstance.transaction(function (tran) {
var html = '<table><thead><th>Mail ID </th><th>ID</th><th>Name </th></thead><tbody>';
tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
for (i = 0; i < data.rows.length; i++) {
html += '<tr><td>'
+ '<a ' + 'href="mailto:' + data.rows[i].MailID + '">' + data.rows[0].MailID + '</a>' +
'</td><td>' + data.rows[i].id + '</td><td>' + data.rows[i].Name + '</td></tr>';
};
html += '</tbody></table>';
$('#myTab').html(html);
});
});
Antes de hacer nada, por favor no te olvides de incluir la librería jQuery. Tampoco te olvides de crear un div con id MyTab. Puedes agregar un CSS para la tabla que estamos creando dinámicamente tal y como puedes ver a continuación.
table,tr,td,th {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
margin:10px;
}
Código completo
A continuación puedes ver el código completo.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to Web SQL</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var myDBInstance = openDatabase('dbSibeeshPassion', '1.0', 'This is a client side database', 3 * 1024 * 1024);
//check whether the database is created or not.
if (!myDBInstance) {
alert('Oops, your database was not created');
}
else {
var version = myDBInstance.version;
//var name = "Sibi";
//var id = "1";
//var MailID = "[email protected]";
myDBInstance.transaction(function (tran) {
tran.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, Name, MailID)');
//tran.executeSql('insert into Users (id, Name, MailID) values (?,?,?)', [id, name, MailID]);
tran.executeSql('insert into Users (id, Name, MailID) values (1, "Sibi","[email protected]")');
tran.executeSql('insert into Users (id, Name, MailID) values (2, "Aji","[email protected]")');
tran.executeSql('insert into Users (id, Name, MailID) values (3, "Ansu","[email protected]")');
});
myDBInstance.transaction(function (tran) {
var html = '<table><thead><th>Mail ID </th><th>ID</th><th>Name </th></thead><tbody>';
tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
for (i = 0; i < data.rows.length; i++) {
html += '<tr><td>'
+ '<a ' + 'href="mailto:' + data.rows[i].MailID + '">' + data.rows[0].MailID + '</a>' +
'</td><td>' + data.rows[i].id + '</td><td>' + data.rows[i].Name + '</td></tr>';
};
html += '</tbody></table>';
$('#myTab').html(html);
});
});
}
</script>
<style>
table,tr,td,th {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<div id="myTab"></div>
</body>
</html>