J\u00e1 pensou em utilizar SQL do lado do Cliente? Bom, agora isso \u00e9 poss\u00edvel, com o HTML 5 podemos utilizar o\u00a0Web SQL Database.<\/p>\n
Ele traz uma API de banco de dados SQL Web, por enquanto ainda \u00e9 uma especifica\u00e7\u00e3o separada do HTML 5, mas j\u00e1 introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.<\/p>\n
Estamos supondo que voc\u00ea j\u00e1 conhe\u00e7a e trabalhe com o SQL, mas caso n\u00e3o saiba o que \u00e9, recomendamos um mini curso de MySQL<\/a>.<\/p>\n Por enquanto, Web SQL Database est\u00e1 suportado nas \u00faltimas vers\u00f5es do Chorme, Safari e Opera.<\/p>\n Esta postagem \u00e9 baseada no artigo em ingl\u00eas: Web SQL Database<\/a><\/p>\n <\/p>\n H\u00e1 tr\u00eas seguintes m\u00e9todos fundamentais definidos na especifica\u00e7\u00e3o de que vamos\u00a0mostrar nesta postagem:<\/p>\n <\/p>\n O openDataBase<\/i> m\u00e9todo cuida da abertura de um banco de dados se ele j\u00e1 existe, este m\u00e9todo ir\u00e1 cri\u00e1-lo se ele n\u00e3o existe.<\/p>\n Para criar e abrir um banco de dados, use o seguinte c\u00f3digo:<\/p>\n <\/p>\n Acima m\u00e9todo tem\u00a0quatro par\u00e2metros:<\/p>\n <\/p>\n Para executar uma consulta, deve ser utilizado a fun\u00e7\u00e3o database.transaction (). Esta fun\u00e7\u00e3o precisa de um \u00fanico argumento, mas pode ser passado o 2\u00ba e 3\u00ba parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:<\/p>\n <\/p>\n As consultas acima ir\u00e3o criar uma tabela chamada LOGS na base de dados “Teste’.<\/p>\n <\/p>\n Para inserir dados\u00a0\u00a0na tabela, utilizamos a fun\u00e7\u00e3o transaction() tamb\u00e9m, s\u00f3 que, desta vez com o INSERT para popular a tabela, veja o exemplo:<\/p>\n <\/p>\n Tamb\u00e9m\u00a0podemos passar valores din\u00e2micos, utilizamos a seguinte sintaxe:<\/p>\n <\/p>\n Aqui novo_log \u00e9 uma vari\u00e1vel e executeSql mapeia cada item no argumento de matriz para o “?”, isto \u00e9, poder\u00edamos ter v\u00e1rios “?” e no final ter\u00edamos [var_1,var_2,var_3], sendo que, ele utilizar\u00e1 a ordem exata das vari\u00e1veis para popular a query.<\/p>\n <\/p>\n Para ler os registros j\u00e1 existentes usamos um callback para capturar os resultados da seguinte forma:<\/p>\n <\/p>\n Ent\u00e3o, finalmente, vamos \u00a0criar um exemplo em HTML 5, \u00a0este exemplo est\u00e1 funcional e testado no Chrome vers\u00e3o Vers\u00e3o 39.0.2171.71 m.<\/p>\n <\/p>\n Isso produziria o seguinte resultado:<\/p>\n <\/p>\n \u00c9 bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persist\u00eancia \u00e9 como uma sess\u00e3o, ao fechar o browser perde-se o objeto, mas ao trocar de p\u00e1gina dentro do mesmo dom\u00ednio o mesmo permanece.<\/p>\n J\u00e1 pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload\u00a0<\/a>para rastrear todo o caminho que um usu\u00e1rio caminhou dentro do seu site? A utiliza\u00e7\u00e3o ficar\u00e1 por conta da imagina\u00e7\u00e3o de voc\u00eas.<\/p>\n <\/p>\n Um exemplo que encontramos no GitHub e que vale a pena ver: https:\/\/gist.github.com\/andyj\/1599544<\/p>\n Link de uma aplica\u00e7\u00e3o feita com Web Sql. Se gostaram, compartilhem e fa\u00e7am coment\u00e1rios, sugest\u00f5es, corre\u00e7\u00f5es e corre\u00e7\u00f5es sempre s\u00e3o bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!<\/p>\n <\/p>\n Quer servidores Seguros, Est\u00e1veis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite<\/span> \u00e9 sua resposta.<\/strong><\/p>\n Hospedagem de Sites<\/a>, Data Center<\/a> e Registro de Dom\u00ednio Gr\u00e1tis<\/a> s\u00f3 aqui!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Como trabalhar com o recurso Web SQL Database HTML 5. Vamos explicar, exemplificar e testar a funcionalidade para demonstrar sua utiliza\u00e7\u00e3o e seus benef\u00edcios.<\/p>\n","protected":false},"author":1,"featured_media":3922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,13,15,19,28],"tags":[332,453,591,656],"class_list":["post-3903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-html-2","category-javascript","category-mysql","category-tutoriais","tag-html-5-sql","tag-novidade-html-5","tag-sql-do-lado-do-cliente","tag-web-sql-database"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3903"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3922"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Os m\u00e9todos principais:<\/h2>\n
\n
Abrindo Base de dados:<\/h2>\n
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n<\/pre>\n\n
Execu\u00e7\u00e3o de consultas:<\/h2>\n
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n\n\/\/ Simples\ndb.transaction (function (tx) { \n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)\");\n});\n\n\/\/ Debugando\ndb.transaction (function (tx) { \n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)\",\n function(tx){\n \/*Sucesso*\/\n },\n function(erro){\n \/*Error*\/\n });\n});<\/pre>\nInserir dados:<\/h2>\n
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n\ndb.transaction (function (tx) {\n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)\");\n\n \/\/ Os 3 null represetam\n \/\/ 1\u00ba - Um array contendo dados\n \/\/ 2\u00ba - Fun\u00e7\u00e3o para sucesso\n \/\/ 3\u00ba - Fun\u00e7\u00e3o para Erro\n \/\/ Vamos explic\u00e1-los mais abaixo\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') \", null, null, null);\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') \", null, null, null);\n});<\/pre>\nvar db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n\ndb.transaction (function (tx) {\n\n var novo_log = 'Resultado do Log de Teste 01';\n\n \/\/ Os 3 null est\u00e3o sendo mostrados aqui\n \/\/ 1\u00ba - Um array contendo dados, estamos passando apenas um valor com o novo_log\n \/\/ 2\u00ba - Fun\u00e7\u00e3o para sucesso\n \/\/ 3\u00ba - Fun\u00e7\u00e3o para Erro\n \/\/ Vamos explic\u00e1-los mais abaixo\n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)\");\n tx.executeSql (\"INSERT INTO REGISTROS (log) VALUES (?)\",[novo_log],null,null);\t\t\t\t\t\t\n});<\/pre>\nLendo os dados:<\/h2>\n
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n\ndb.transaction (function (tx) {\n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)\",null,null);\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES (?)\",['Resultado do Log de Teste 01'],null,null);\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES (?)\",['Resultado do Log de Teste 02'],null,null);\n});\n\ndb.transaction (function (tx) {\n tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) {\n var len = results.rows.length, i;\n msg = \"<p> Registros encontrados:\" + len + \"<\/ p>\";\n for (i = 0; i <len; i ++) {\n console.log(results.rows.item(i) .log);\n }\n }, null);\n});<\/pre>\nExemplo final:<\/h2>\n
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);\n\ndb.transaction (function (tx) {\n tx.executeSql (\"CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)\",null,null);\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES (?)\",['Resultado do Log de Teste 01'],null,null);\n tx.executeSql (\"INSERT INTO LOGS (log) VALUES (?)\",['Resultado do Log de Teste 02'],null,null);\n console.log('Log mensagem criada e linha inserida');\n});\n\ndb.transaction(function(tx){\n tx.executeSql( \n \"SELECT * FROM LOGS\",\n [],\n function(tx, result){\n console.log('Deu certo!');\n var len = result.rows.length, i;\n for(i=0;i<len;i++){\n console.log( result.rows.item(i) );\n }\n },\n function(tx, error){\n console.log('Deu errado!');\n console.log(error);\n }\n );\n});<\/pre>\nLog mensagem criada e linha inserida\nDeu certo!\nObject {id: 1, log: \"Resultado do Log de Teste 01\"}\nObject {id: 2, log: \"Resultado do Log de Teste 02\"}\n<\/pre>\nConclus\u00e3o:<\/h2>\n
\nLink original do c\u00f3digo aqui.<\/a><\/p>\n
\nHTML5 webSQL app synching with a php MySQL server<\/a><\/p>\n
\n