Decidi compartilhar com vocês uma tecnologia que pude estudar a algum tempo atrás e implementar alguns pequenos projetos.
Este recurso de "BANCO DE DADOS" no browser é um recurso de persistência diretamente no cliente.
Para aqueles acostumados ao desenvolvimento web de alguns anos atrás pode achar que esse recurso é totalmente impossível da parte conceitual.
Porém com os ricos recursos que o HTML5 vem trazendo isso é totalmente aceitável até porque se você tem um bom conceito de "desenvolvedor back-end" vai estar acostumado a utilizar SQL e feliz como um "PORCO NA LAMA" hehe então ...
Aqui neste breve exemplo vamos abordar três métodos:
1- openDatabase
2- transaction
3- executeSql
Porém Antes de implementa-los vamos aplicar um layout simples apenas para dar um lado mais "usuário" para o exemplo, vou utilizar uma biblioteca (JQuery Mobile) rica, simples, funcional...enfim vai te poupar de muita coisa na parte gráfica, a parte ruim é que alguém poderá te chamar de "Designer" HAHAHA chega de papo sirva-se de um café e vamos codar :)
Primeiramente não se esqueça de fazer as referencias necessárias para o funcionamento do JQuery Mobile.
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
Feito isso vamos codificar a parte do layout (...)
<body>
<div class="ui-body ui-body-a">
<div data-role="fieldcontain">
<label for="status">Status:</label>
<select name="status" id="status" data-role="slider">
<option value="on">Ativa</option>
<option value="off">Inativa</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="name">Nome:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="sexo" class="select">Sexo:</label>
<select name="sexo" id="sexo">
<option value="Selecione">Selecione</option>
<option value="Masculino">Masculino</option>
<option value="Feminino">Feminino</option>
</select>
</div>
<button type="button" data-theme="b" id="gravar" name="gravar" onclick="GravarDados()">Gravar</button>
</div>
</body>
Desta forma já podemos verificar o resultado inicial do nosso layout.
"bunitão né?" rs, repare que o JQuery Mobile já trata todos os recursos necessários para o funcionamento ideal para um dispositivo móvel.
Continuando, como você pode ver fizemos uma chamada de uma função Javascript "GravarDados()" ao clicar no botão "GRAVAR" porém ela não foi implementada e se por acaso você fizer o teste verá que o resultado será um "Erro" por falta de implementação da mesma, sendo assim vamos codifica-la ...
var GravarDados = function(){
if (!window.openDatabase) {
alert('Not Supported -> Please try with a WebKit Browser');
}else{
try{
var db = openDatabase('bancoWebBrowser_1', '1.0', 'meu primeiro web database', 2 * 1024 * 1024);
}catch(e) {
alert('Erro !'+e);
}
}
}
Como o objetivo do tutorial é mostrar de forma "simplificada" pode notar que adotei um padrão de código simples, nada impede destas implementações ser feita utilizando recursos mais avançados de técnicas de orientação objetos e etc (...)
Algo bastante importante em citar na primeira verificação " if (!window.openDatabase) { "que é bastante necessária pois o webSql Database não foi implementado por todos os browser. =/
Os navegadores que dão suporte até o momento são:
(Safari, SafariMobile and Chrome) and Opera 10.50 (ATOW alpha on Mac)
As empresas responsáveis por alguns browsers como o Firefox alega que a não implementação seria por falta de padronização do SQL, lembrando que o padrão adotado seria do SQLLite.Devemos lembrar também que as especificações sobre web SQL Database não estão mais sendo mantida pela W3C.
Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.Se quiser saber mais sobre o assunto verifique na documentação oficial. http://www.w3.org/TR/webdatabase/
Voltando ao que interessa (...)
O código abaixo efetua a criação do nosso banco de dados.
1 - Database Name
2 - Version Number
3 - Text Description
4 - Estimated size of database
- Nada de muito complexo até o momento! =)
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS pessoa (id INTEGER PRIMARY KEY AUTOINCREMENT, status text, nome text, sexo text)');
var status = $('#status').val();
var nome = $('#name').val();
var sexo = $('#sexo').val();
tx.executeSql('INSERT INTO pessoa (status,nome,sexo) VALUES (?,?,?)', [status,nome,sexo]);
tx.executeSql('SELECT id,status,nome,sexo FROM pessoa', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
console.log('Chave: ' +results.rows.item(i).id + ' Nome: '+ results.rows.item(i).nome+ ' Sexo: '+results.rows.item(i).sexo+ ' Status Cadastro: '+ results.rows.item(i).status);
}
});
// Limpa campos ...
$('#status').val('');
$('#name').val('');
$('#sexo').val('');
});
- Note que os comando adotados para a criação da tabela "pessoa" possui uma sintaxe em que qualquer desenvolvedor back-end está acostumado a utilizar no seu dia-dia, após efetuarmos um script de INSERT também padrão pegando os campos da tela com o auxilio do JQuery.
var nome = $('#name').val();
...em seguida efetuamos uma consulta para verificarmos todos os dados gravados na nossa base sendo eles mostrado no "Console" do navegador. (Nada impede que você implemente uma interface para a melhor mostragem dos dados.)
tx.executeSql('SELECT id,status,nome,sexo FROM pessoa', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
console.log('Chave: ' +results.rows.item(i).id + ' Nome: '+ results.rows.item(i).nome+ ' Sexo: '+results.rows.item(i).sexo+ ' Status Cadastro: '+ results.rows.item(i).status);
}
});
É interessante efetuarmos um parentes aqui e enfatizar a importância da utilização de uma ferramenta de DEBUG para implementação de códigos Javascript's pois ele é o seu único Guia como sabemos o Javascript é interpretado pelo motor do browser isso dificulta um pouco a leitura dos erros. Eu costumo utilizar o Chrome que já possui um console nativo porém o Firefox existe o Firebug um plugin excelente de terceiro que inclusive existe para varias outras versões de navegadores.
Site Oficial: http://getfirebug.com/
O resultado da implementação acima seria essa:
O resultado do "SELECT * " no console, ficaria assim (...)
Isso é tudo que você precisa para começar com Web SQL Database.
Você já deve ter percebido mas vale constar a ideia de software que colocamos a seguir é um conceito que vem surgindo novo, principalmente no mundo móvel que seria de um software web porém com funcionabilidades locais não descartando a possibilidade de uma integração com algum webservice ou sincronia desses dados (...) enfim fica a ideia !
Missão dada é missão cumprida ! hehe
LOGO estarei disponibilizando para download o fontes dos exemplos realizados aqui.
Até a próxima =)
Links Utilizados no Post:
Parabéns Junior o post fico muito bom.
ResponderExcluirApenas um pequeno detalhe que implica na visualização dos resultados finais do post.
Á ultima imagem postada não esta disponível para visualização em tamanho real com as demais.
Abraços
Joéder