ARCmop Java Programacion Solaris Linux

Java-linux-programacion

WEBSQL, HtML5 Guardando Datos en BD del navegador

Posted by Cmop en mayo 8, 2013

Buenos, en esta oportunidad me gustaría compartir una demostración de como utilizar WEBSQL, algo que llego junto a HTML 5. WEBSQL es un “Método de almacenamiento de datos del lado del cliente, que permite consultas sobre una base de datos SQLite: de acceso y manipulación”. Es soportado por algunos navegadores, para eso veamo las pagina CANIUSE.

canisue websql

canisue websql

Su especificacion se encuentra en: websql

Un artículo introductorio en inglés: Aqui

Para Firefox existe un plugin (a dia de hoy el plugin no es funcional con la ultima versión) para agregarle la compatibilidad de WEBSQL, porque Mozilla y Microsoft no se han inclinado por WEBSQL sino mas bien por IndexedDB, que ojalá la pueda probar después.

Bueno ahora veamos el ejemplo que les comente, que probado en Chrome, Opera y Safari, he utilizado Jquery 2.0

El ejemplo utilizad un archivo de javascript de la pagina Dragonbound.net que contiene todos los avatars, se leerá dicho array y se separá en tablas, identificando que avatares son de Body, Head, Flag, Glass, asi como una tabla que contendrá todo el array.

La página web

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>PROBANDO WEBSQL</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
        <script src="http://code.jquery.com/jquery-2.0.0.min.js" ></script>
        <script src="http://dragonbound.net/static/js/avatars.js" ></script>
        <script src="bd.js" ></script>
        <script src="principal.js" ></script>
        <style>
            #div_p{
                margin-left: auto;
                margin-right: auto;
                width: 400px;
            }
            td div{
                text-align: center;
            }
        </style>
    </head>
    <body>
<div id="div_p">
<div><strong>Usando WEBSQL</strong></div>
<table border="1">
<tr>
<td>Avatars Originales</td>
<td>
<div id="originales">0</div></td>
</tr>
<tr>
<td>Avatars Masculinos Posibles</td>
<td>
<div id="posibles">0</div></td>
</tr>
<tr>
<td>Cabezas</td>
<td>
<div id="cabezas">0</div></td>
</tr>
<tr>
<td>Cuerpos</td>
<td>
<div id="cuerpos">0</div></td>
</tr>
<tr>
<td>Banderas</td>
<td>
<div id="banderas">0</div></td>
</tr>
<tr>
<td>Mira</td>
<td>
<div id="anteojos">0</div></td>
</tr>
<tr>
<td>Numero Combinaciones Totales</td>
<td style="width: 150px;">
<div id="ncomb">0</div></td>
</tr>
<tr>
<td>-----</td>
<td><button onclick="javascript:guardar();">Procesar</button></td>
</tr>
</table>
</div>
</body>
</html>

El archivo de BD, crea la BD y las tablas.

var createStatementHeads = "CREATE TABLE IF NOT EXISTS heads (id INTEGER, tipo TEXT, nombre TEXT, estrella INTEGER,retraso INTEGER,ataque INTEGER,defensa INTEGER,corazon INTEGER,retraso_dual INTEGER,palana INTEGER,recuperacion_escudo INTEGER, CONSTRAINT unicoH UNIQUE (nombre))";
var createStatementBodies = "CREATE TABLE IF NOT EXISTS bodies (id INTEGER, tipo TEXT, nombre TEXT, estrella INTEGER,retraso INTEGER,ataque INTEGER,defensa INTEGER,corazon INTEGER,retraso_dual INTEGER,palana INTEGER,recuperacion_escudo INTEGER, CONSTRAINT unicoB UNIQUE (nombre))";
var createStatementFlags = "CREATE TABLE IF NOT EXISTS flags (id INTEGER , tipo TEXT, nombre TEXT, estrella INTEGER,retraso INTEGER,ataque INTEGER,defensa INTEGER,corazon INTEGER,retraso_dual INTEGER,palana INTEGER,recuperacion_escudo INTEGER, CONSTRAINT unicoF UNIQUE (nombre))";
var createStatementGlass = "CREATE TABLE IF NOT EXISTS glass (id INTEGER, tipo TEXT, nombre TEXT, estrella INTEGER,retraso INTEGER,ataque INTEGER,defensa INTEGER,corazon INTEGER,retraso_dual INTEGER,palana INTEGER,recuperacion_escudo INTEGER, CONSTRAINT unicoG UNIQUE (nombre))";
var createStatementOriginales = "CREATE TABLE IF NOT EXISTS avatars_originales (id INTEGER, tipo TEXT, nombre TEXT, estrella INTEGER,retraso INTEGER,ataque INTEGER,defensa INTEGER,corazon INTEGER,retraso_dual INTEGER,palana INTEGER,recuperacion_escudo INTEGER)";

var insertStatementHeads = "INSERT INTO heads (id, tipo,nombre, estrella ,retraso ,ataque ,defensa ,corazon ,retraso_dual ,palana ,recuperacion_escudo  ) VALUES (?,?,?, ?,?, ?,?, ?,?, ?,?)";
var insertStatementBodies = "INSERT INTO bodies (id, tipo,nombre, estrella ,retraso ,ataque ,defensa ,corazon ,retraso_dual ,palana ,recuperacion_escudo  ) VALUES (?,?,?, ?,?, ?,?, ?,?, ?,?)";
var insertStatementFlags = "INSERT INTO flags (id, tipo,nombre, estrella ,retraso ,ataque ,defensa ,corazon ,retraso_dual ,palana ,recuperacion_escudo  ) VALUES (?,?,?, ?,?, ?,?, ?,?, ?,?)";
var insertStatementGlass = "INSERT INTO glass (id, tipo,nombre, estrella ,retraso ,ataque ,defensa ,corazon ,retraso_dual ,palana ,recuperacion_escudo  ) VALUES (?,?,?, ?,?, ?,?, ?,?, ?,?)";
var insertStatementTodos = "INSERT INTO avatars_originales (id, tipo,nombre, estrella ,retraso ,ataque ,defensa ,corazon ,retraso_dual ,palana ,recuperacion_escudo  ) VALUES (?,?,?, ?,?, ?,?, ?,?, ?,?)";

var db = openDatabase("MIDGB", "1.0", "Mi DGB TEst", 2000000);

crearTablas();
var errorOpcion;

function crearTablas() {
    db.transaction(function(tx) {
        tx.executeSql(createStatementHeads, [], function() {
        }, onError);
        tx.executeSql(createStatementBodies, [], function() {
        }, onError);
        tx.executeSql(createStatementFlags, [], function() {
        }, onError);
        tx.executeSql(createStatementGlass, [], function() {
        }, onError);
        tx.executeSql(createStatementOriginales, [], function() {
        }, onError);
    });
}

function onError(tx, error) {
    console.error(error.message);
    disminuyeContador(errorOpcion);
}

function insertarDatos(opcion, id, tipo, nombre, estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo) {
    errorOpcion = opcion;
    switch (opcion) {
        case 1:
            db.transaction(function(tx) {
                tx.executeSql(insertStatementBodies, [
                    id, tipo, nombre.toUpperCase(), estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo
                ], aumentaContador(opcion, tx), onError);
            });
            break;
        case 2:
            db.transaction(function(tx) {
                tx.executeSql(insertStatementHeads, [
                    id, tipo, nombre.toUpperCase(), estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo
                ], aumentaContador(opcion, tx), onError);
            });
            break;
        case 3:
            db.transaction(function(tx) {
                tx.executeSql(insertStatementFlags, [
                    id, tipo, nombre.toUpperCase(), estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo
                ], aumentaContador(opcion, tx), onError);
            });
            break;
        case 4:
            db.transaction(function(tx) {
                tx.executeSql(insertStatementGlass, [
                    id, tipo, nombre.toUpperCase(), estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo
                ], aumentaContador(opcion, tx), onError);
            });
            break;
        case 5:
            db.transaction(function(tx) {
                tx.executeSql(insertStatementTodos, [
                    id, tipo, nombre.toUpperCase(), estrella, retraso, ataque, defensa, corazon, retraso_dual, palana, recuperacion_escudo
                ], null, null);
            });
            break;
    }
}
function aumentaContador(opcion, tx) {
    switch (opcion) {
        case 1:
            $("#cabezas").html(parseInt($("#cabezas").html()) + 1);
            break;
        case 2:
            $("#cuerpos").html(parseInt($("#cuerpos").html()) + 1);
            break;
        case 3:
            $("#banderas").html(parseInt($("#banderas").html()) + 1);
            break;
        case 4:
            $("#anteojos").html(parseInt($("#anteojos").html()) + 1);
            break;
    }
    $("#ncomb").html(parseInt($("#cabezas").html()) * parseInt($("#cuerpos").html()) *
            parseInt($("#banderas").html()) * parseInt($("#anteojos").html()));
}

function disminuyeContador(opcion) {
    switch (opcion) {
        case 1:
            $("#cabezas").html(parseInt($("#cabezas").html()) - 1);
            break;
        case 2:
            $("#cuerpos").html(parseInt($("#cuerpos").html()) - 1);
            break;
        case 3:
            $("#banderas").html(parseInt($("#banderas").html()) - 1);
            break;
        case 4:
            $("#anteojos").html(parseInt($("#anteojos").html()) - 1);
            break;
    }
    $("#ncomb").html(parseInt($("#cabezas").html()) * parseInt($("#cuerpos").html()) *
            parseInt($("#banderas").html()) * parseInt($("#anteojos").html()));
}

El archivo que inicia el proceso

function guardar() {
    var longitud, AVATARS_POSIBLES = [], AVATARS_BODIES = [], AVATARS_HEADS = [],
            AVATARS_FLAG = [], AVATARS_GLASS = [], AVATARS_TOTAL = [], temp1, temp2, temp3, temp4;
    longitud = AVATARS.length;
    for (var i in  AVATARS) {
        if (AVATARS[i][2] === 'a' || AVATARS[i][2] === 'm') {
            AVATARS_POSIBLES[AVATARS_POSIBLES.length] = AVATARS[i];
        }else{
            console.log("Avatar Femenino");
        }
    }
    $("#originales").html(AVATARS.length);
    $("#posibles").html(AVATARS_POSIBLES.length);
    AVATARS_POSIBLES = [];

    var tipo, tipo2, nombre, insertable = false;
    for (var i in AVATARS) {
        temp1 = AVATARS[i][1];
        temp2 = AVATARS[i][3];
        temp3 = AVATARS[i][5];
        temp4 = AVATARS[i][2];
        if (temp2 !== "STANDARD" && temp2.toLowerCase().indexOf("gm") === -1 && temp3 === 1 && (temp4 === 'a' || temp4 === 'm')) {
            switch (temp1) {
                case "b" :
                    {
                        tipo = "b";
                        tipo2 = 1;
                        if (!existe(AVATARS_BODIES, 3, temp2)) {
                            insertable = true;
                        }
                        break;
                    }
                case "h" :
                    {
                        tipo = "h";
                        tipo2 = 2;
                        if (!existe(AVATARS_HEADS, 3, temp2)) {
                            insertable = true;
                        }
                        break;
                    }
                case "g" :
                    {
                        tipo = "g";
                        tipo2 = 4;
                        if (!existe(AVATARS_GLASS, 3, temp2)) {
                            insertable = true;
                        }
                        break;
                    }
                case "f" :
                    {
                        tipo = "f";
                        tipo2 = 3;
                        if (!existe(AVATARS_FLAG, 3, temp2)) {
                            insertable = true;
                        }
                        break;
                    }
            }
            if (insertable) {
                insertarDatos(tipo2, i, tipo, AVATARS[i][3],
                        AVATARS[i][12], AVATARS[i][13], AVATARS[i][14], AVATARS[i][15],
                        AVATARS[i][16], AVATARS[i][17], AVATARS[i][18], AVATARS[i][19]);
                insertarDatos(5, i, tipo, AVATARS[i][3],
                        AVATARS[i][12], AVATARS[i][13], AVATARS[i][14], AVATARS[i][15],
                        AVATARS[i][16], AVATARS[i][17], AVATARS[i][18], AVATARS[i][19]);
                insertable = false;
            }
        } else {
            insertarDatos(5, i, tipo, AVATARS[i][3],
                    AVATARS[i][12], AVATARS[i][13], AVATARS[i][14], AVATARS[i][15],
                    AVATARS[i][16], AVATARS[i][17], AVATARS[i][18], AVATARS[i][19]);
        }
    }
}

function existe(arrayFuente, posicionBuscar, valor) {
    for (var i in arrayFuente) {
        if ($.trim(arrayFuente[i][posicionBuscar].toLowerCase()) === $.trim(valor.toLowerCase())) {
            return true;
        }
    }
}

Y los resultados son:

websql opera

websql opera

websql chrome

websql chrome

websql safari

websql safari

Abriendo la BD con Navicat

Navicat Sqlite WEBSQL

Navicat Sqlite WEBSQL

Y eso fue todo, he de anotar además que segun la W3C esta especificacion ya no está soportada, pero segun leo en ENLACE el mensaje al que se refiere apareció en noviembre del 2010 y ahora estamos mayo 2013 y aún es funcional, asi que cada uno es libre de elegir. NOTA: Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

Nota:
En chrome estas bases de datos se guardan por defecto en: C:\Users\{USUARIO}\AppData\Local\Google\Chrome\User Data\Default\databases
Saludos a todos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: