CRUD con Web SQL [JavaScript]

¿Qué tal amigos? En la publicación de hoy les mostraré como hacer una aplicación sencilla que permita almacenar en una tablita registros de Integrandes.

El tema es: ¿qué tecnología usar para guardar la información?. Tenemos distintas opciones:

Realizar una conexión a una base de datos relacional (según tu gusto), a MySQL, PostgreSQL, etc.
Usar una base de datos con documentos, con mayor popularidad tenemos a MongoDB.
Utilizar archivos para almacenar el contenido.
Etcétera.

Me agrada mucho la primera opción, porque es algo que manejo mucho y sería sencillo de realizar, pero requiero de una tecnología del lado del servidor que me apoye (PHP, Java, Python) por lo que en esta ocasión me abstengo de comenzar...

El segundo caso si utilizo base de datos documentales me llevaría demasiado tiempo hacer algo bien estructurado debido a mi falta de experiencia.

El tercer caso en un caso particular ni me agrada, así que ni lo menciono ~~jajaja~~.

¿Pero todo lo anterior a que viene? Sucede que en esta ocasión me preparo para generar una pequeña aplicación personal y requiero almacenar información, para ser exactos usaré PhoneGap [Ya sabrán por donde va este asunto]. Leyendo por aquí y por allá llegue a conocer Web SQL.

Web SQL es una base de datos que podemos usar de forma nativa desde nuestro navegador, esto significa que para mi caso personal no requiero guardar o tener un concentrado de información de varios nodos en una misma base de datos, necesito una base de datos para uso "local". Web SQL si lo vemos de esta forma trabaja del lado del cliente, no requiero utilizar un "servidor". Web SQL se apoya [o vive] desde JavaScript, por lo tanto para nuestro ejemplo de hoy no necesitas mas que un navegador y un bloc de notas.

A continuación muestro un pequeño ejemplo de como guardar, actualizar, eliminar y consultar registros de una tabla usando HTML + JavaScript + Web SQL. El objetivo del Post como es costumbre como los demás no es explicar la API de Web SQL [solo es un pequeño ejemplito para iluminar tu camino] por lo que si deseas conocer detalles da clic al siguiente link.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Aprendiendo Web SQL</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
        <script src="js/index.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <h2>Integrantes:</h2>
            <form><ul id="li-integrantes"></ul>
            </form>
        </div>
        <div>
            <h2>Registro</h2>
            <form>
                <label for="txt-id">Id</label>
                <input id="txt-id" type="text" readonly/><br />
                <label for="txt-nombres">Nombre</label>
                <input id="txt-nombres" type="text"/><br />
                <label for="txt-apellidos">Apellidos</label>
                <input id="txt-apellidos" type="text"/><br />
                <button id="btn-guardar" type="button">Guardar</button>
                <button type="reset">Limpiar</button>
            </form>
        </div>
    </body>
</html>

Como te darás cuenta solo hago uso de 2 archivos de JavaScript [Ni siquiera uso CSS jeje] para el funcionamiento de nuestra aplicación, un archivo index.js y el famoso jquery.js. jQuery básicamente lo uso para modificar el DOM a mi gusto, si deseas en tu caso puedes usar puro JavaScript y te quedará más limpio y liviano tu código.

El HTML se compone de 2 divisiones o secciones, la primera contiene una lista sin elementos la cual usaremos para mostrar a nuestros Integrantes, para ser exactos sus nombres, apellidos y sus respectivos botones de editar y eliminar. La segunda división es exclusiva para el formulario de creación y edición. El formulario se compone de 3 elementos para visualizar e ingresar información: ID, nombres y apellidos de los cuales ID solo es para lectura y no permite ser editado.

index.js

var db = openDatabase('app', '1.0', 'BD de test', 100 * 1024);

$(document).ready(function() {

console.info("Iniciando...");

init();

listarIntegrantes();

console.info("Carga finalizada...");

////////////////////////////////////////////////////////////////////
    ////////////////////////////Funciones jquery///////////////////////
    ////////////////////////////////////////////////////////////////////
    $('#btn-guardar').click(function() {
        var txtId = $('#txt-id');
        var txtNombres = $('#txt-nombres');
        var txtApellidos = $('#txt-apellidos');

if (txtNombres.val() === '' || txtApellidos.val() === '') {
            alert("Los campos nombres y apellidos son requeridos...");
            return;
        }

var integrante = Object();

integrante.nombres = txtNombres.val();
        integrante.apellidos = txtApellidos.val();

if (txtId.val() === '') { //Lo guarda
            integrante.id = new Date().getTime();
            guardarIntegrante(integrante);
        } else { //Lo actualiza
            integrante.id = parseInt(txtId.val());
            actualizarIntegrante(integrante);
        }

listarIntegrantes();

txtNombres.val(null);
        txtApellidos.val(null);
        txtId.val(null);
    });

$('#li-integrantes').on("click", ".btn-editar", function() {
        var idIntegrante = $(this).data("id");
        consultarIntegrante(idIntegrante);
    });

$('#li-integrantes').on("click", ".btn-eliminar", function() {
        var idIntegrante = $(this).data("id");
        eliminarIntegrante(idIntegrante);
        listarIntegrantes();
    });

});

////////////////////////////////////////////////////////////////////
///////////////////////funciones para el CRUd///////////////////////
////////////////////////////////////////////////////////////////////
function init() {
    db.transaction(function(tx) {
        tx.executeSql('create table if not exists INTEGRANTE(ID, NOMBRES, APELLIDOS)');
    }, error, exito);
}

function listarIntegrantes() {
    db.readTransaction(function(t) {
        t.executeSql('SELECT ID, NOMBRES, APELLIDOS FROM INTEGRANTE', [], function(t, rs) {
            if (rs.rows.length > 0) {
                var lisHtml = '';
                for (var i = 0; i < rs.rows.length; i++) {
                    var integrante = rs.rows.item(i);
                    var id = integrante.ID;
                    lisHtml += '<li>' + integrante.NOMBRES + ' ' + integrante.APELLIDOS
                            + '<button class="btn-editar" type="button" data-id="' + id + '">Editar</button>'
                            + '<button class="btn-eliminar" type="button" data-id="' + id + '">Eliminar</Eliminar></li>
';
                }
                $('#li-integrantes').html(lisHtml);
            }

}, error);
    });
}

function consultarIntegrante(idIntegrante) {
    db.readTransaction(function(t) {
        t.executeSql('SELECT ID, NOMBRES, APELLIDOS FROM INTEGRANTE WHERE ID = ?', [idIntegrante], function(t, rs) {
            if (rs.rows.length > 0) {
                var integrante = new Object();
                integrante.nombres = rs.rows.item(0).NOMBRES;
                integrante.apellidos = rs.rows.item(0).APELLIDOS;

$('#txt-id').val(rs.rows.item(0).ID);
                $('#txt-nombres').val(rs.rows.item(0).NOMBRES);
                $('#txt-apellidos').val(rs.rows.item(0).APELLIDOS);

}
        }, error);
    });
}

////////////////////////////////////////////////////////////////////
////////////////////////Funciones de logueo////////////////////
////////////////////////////////////////////////////////////////////
var error = function(err) {
    console.error(err);
};

var exito = function() {
    console.info("Tabla creada...");
};

Del archivo anterior lo más relevante es lo siguiente:

Para abrir conexión con una base de datos usamos openDatabase() que retorna un objeto con el cual podemos hacer lo que necesitemos. Los valores que recibe son: un nombre, una versión, descripción y el tamaño.
Con la función transaction() generamos una transacción en la cual podemos incluir un grupo de instrucciones como creación de tablas, altas, actualizaciones, ediciones, etc. Claro está que no lo hace sola, utiliza la función executeSql() del objeto que retorna transaction().
Para usar executeSql() hay muchas formas, un caso es para cuando se desea ejecutar intrucciones SQL sin parámetros (como el de la función init()) que recibe: instruncción sql, función de error, función de éxito. Para el caso de la función listarIntegrantes() son 4 los parámetros recibidos: instrucción sql, una lista con parámetros que serán remplazados en la instrucción sql [se remplazan por los "?"], función de éxito, función de error.
Algo interesante para tomar nota es que la función readTransaction() esta destinada para incluir instrucciones de consulta, aunque en ningún momento dudo que dejará de funcionar si se usan otro tipo de instrucciones dentro de ella.

Para terminar, como breve conclusión si lo que necesitas es guardar información en una aplicación Web de forma local que sea persistente Web SQL es una buena solución, para mi caso este señor se lleva bien con PhoneGap así que en lugar de usar un SQLite ya saben que usar.

Una captura de la aplicación:

Es una pena que cada año que pasa mi forma de redactar empeora, aún así espero les sea de utilidad esta publicación...

Nos vemos hasta la próxima entrega :D donde posiblemente les muestre como generar reportes totalmente dinámicos con PrimeFaces y JasperReports.

Nota: Firefox no soporta Web SQL ~~jajajajaja~~

Aprende JAVA

lunes, 2 de febrero de 2015

CRUD con Web SQL [JavaScript]

No hay comentarios:

Popular Posts

Labels

Facebook

Páginas recomendadas

Blog Archive