SQL do lado do Cliente? Web SQL Database com HTML5

11:54

Já pensou em utilizar SQL do lado do Cliente? Bom, agora isso é possível, com o HTML 5 podemos utilizar o Web SQL Database.

Ele traz uma API de banco de dados SQL Web, por enquanto ainda é uma especificação separada do HTML 5, mas já introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.

Estamos supondo que você já conheça e trabalhe com o SQL, mas caso não saiba o que é, recomendamos um mini curso de MySQL.

Por enquanto, Web SQL Database está suportado nas últimas versões do Chorme, Safari e Opera.

Esta postagem é baseada no artigo em inglês: Web SQL Database

 

Os métodos principais:

Há três seguintes métodos fundamentais definidos na especificação de que vamos mostrar nesta postagem:

  1. openDataBase: Este método cria o objeto de banco de dados, depois utiliza um banco de dados existente ou criar um novo.
  2. transaction: Este método controlar a transação e  nos retorna uma confirmação ou anulação com base no que foi executado.
  3. executeSql: Este método é usado para executar um consulta SQL.

 

Abrindo Base de dados:

O openDataBase método cuida da abertura de um banco de dados se ele já existe, este método irá criá-lo se ele não existe.

Para criar e abrir um banco de dados, use o seguinte código:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

 

Acima método tem quatro parâmetros:

  1. Nome do banco
  2. Número da versão
  3. Descrição de texto
  4. Tamanho da base de dados

 

Execução de consultas:

Para executar uma consulta, deve ser utilizado a função database.transaction (). Esta função precisa de um único argumento, mas pode ser passado o 2º e 3º parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);// Simplesdb.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");});// Debugandodb.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)", function(tx){ /*Sucesso*/ }, function(erro){ /*Error*/ });});

 

As consultas acima irão criar uma tabela chamada LOGS na base de dados “Teste’.

 

Inserir dados:

Para inserir dados  na tabela, utilizamos a função transaction() também, só que, desta vez com o INSERT para popular a tabela, veja o exemplo:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)"); // Os 3 null represetam // 1º - Um array contendo dados // 2º - Função para sucesso // 3º - Função para Erro // Vamos explicá-los mais abaixo tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') ", null, null, null); tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') ", null, null, null);});

 

Também podemos passar valores dinâmicos, utilizamos a seguinte sintaxe:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { var novo_log = 'Resultado do Log de Teste 01'; // Os 3 null estão sendo mostrados aqui // 1º - Um array contendo dados, estamos passando apenas um valor com o novo_log // 2º - Função para sucesso // 3º - Função para Erro // Vamos explicá-los mais abaixo tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)"); tx.executeSql ("INSERT INTO REGISTROS (log) VALUES (?)",[novo_log],null,null); });

 

Aqui novo_log é uma variável e executeSql mapeia cada item no argumento de matriz para o “?”, isto é, poderíamos ter vários “?” e no final teríamos [var_1,var_2,var_3], sendo que, ele utilizará a ordem exata das variáveis para popular a query.

 

Lendo os dados:

Para ler os registros já existentes usamos um callback para capturar os resultados da seguinte forma:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);});db.transaction (function (tx) { tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p> Registros encontrados:" + len + "</ p>"; for (i = 0; i <len; i ++) { console.log(results.rows.item(i) .log); } }, null);});

 

Exemplo final:

Então, finalmente, vamos  criar um exemplo em HTML 5,  este exemplo está funcional e testado no Chrome versão Versão 39.0.2171.71 m.

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null); console.log('Log mensagem criada e linha inserida');});db.transaction(function(tx){ tx.executeSql( "SELECT * FROM LOGS", [], function(tx, result){ console.log('Deu certo!'); var len = result.rows.length, i; for(i=0;i<len;i++){ console.log( result.rows.item(i) ); } }, function(tx, error){ console.log('Deu errado!'); console.log(error); } );});

 

Isso produziria o seguinte resultado:

Log mensagem criada e linha inseridaDeu certo!Object {id: 1, log: "Resultado do Log de Teste 01"}Object {id: 2, log: "Resultado do Log de Teste 02"}

 

Conclusão:

É bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persistência é como uma sessão, ao fechar o browser perde-se o objeto, mas ao trocar de página dentro do mesmo domínio o mesmo permanece.

Já pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload para rastrear todo o caminho que um usuário caminhou dentro do seu site? A utilização ficará por conta da imaginação de vocês.

 

Um exemplo que encontramos no GitHub e que vale a pena ver:
Link original do código aqui.

https://gist.github.com/andyj/1599544

Link de uma aplicação feita com Web Sql.
HTML5 webSQL app synching with a php MySQL server

Se gostaram, compartilhem e façam comentários, sugestões, correções e correções sempre são bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!


 

Quer servidores Seguros, Estáveis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite é sua resposta.

Hospedagem de Sites, Data Center e Registro de Domínio Grátis só aqui!