Banco de Dados no Cliente com HTML 5 e JS

Apresentação em tema: "Banco de Dados no Cliente com HTML 5 e JS"— Transcrição da apresentação:

1 Banco de Dados no Cliente com HTML 5 e JS
Prof. Rafael Vieira THIS WORK IS LICENSED UNDER THE CREATIVE COMMONS ATTRIBUTION-SHAREALIKE 4.0 INTERNATIONAL LICENSE. TO VIEW A COPY OF THIS LICENSE, VISIT OR SEND A LETTER TO CREATIVE COMMONS, PO BOX 1866, MOUNTAIN VIEW, CA 94042, USA. CREATED BY RAFAEL S. T. VIEIRA

2 Esses bancos são relacionados a cada domínio acessado nos Navegadores.
Definição Bancos de dados no cliente são implementados pelos navegadors e oferecem mais espaço e organização para os dados ao contrário dos métodos já vistos. Os mais importantes atualmente são: WebSQL Database (Chrome, Safari e Opera), banco relacional. IndexedDB (Padrão para navegadores HTML 5.), banco orientado a objetos. Esses bancos são relacionados a cada domínio acessado nos Navegadores.

3 db.transaction(function(transaction){ // criar a tabela
WebSQL Database Um banco de dados relacional baseado em SQL e que pode ser acessado através de Javascript. var db = openDatabase("Teste", "1.0", "Teste Web SQL Database", ); db.transaction(function(transaction){ // criar a tabela transaction.executeSql("CREATE TABLE Teste (id REAL UNIQUE, nome TEXT, timestamp REAL)", [[]], null, null); transaction.executeSql("INSERT INTO Teste (nome, timestamp) values(?, ?)", [['Alex', new Date().getTime()]], null, null); }); Mais:

4 WebSQL Database: Consultas
Todas as transações são traduzidas em consulta SQL, deste modo o WebSQL aproveita-se do conhecimento prévio de SQL. var db.transaction(function(transaction){ transaction.executeSql("SELECT COUNT(*) FROM Teste", null, null, null); }); db.transaction(function(transaction){ transaction.executeSql( "SELECT COUNT(*) FROM Teste", function(transaction, result){ console.log('deu certo!'); console.log(result); }, function(transaction, error){ console.log('deu pau!'); console.log(error); } ); O banco WebSQL não é considerado padrão e nem é mais mantido Pela W3C

5 Mais: http://www.w3.org/TR/IndexedDB/
O objeto Window armazena o banco, segundo o HTML5, que é orientado a objetos baseado em JavaScript que permite armazenar e recuperar objetos que são indexados com uma chave. window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if(!window.indexedDB) { console.log("Seu navegador não suporta o recurso IndexedDB"); } Mais:

6 IndexedDB: Criando um banco
Transações são quaisquer ações tomadas sobre dados em um banco de leitura (readonly) ou de escrita (readwrite). // Criando BD var requisicao = indexedDB.open("biblioteca"); requisicao.onupgradeneeded = function() { // Criando objeto tabela var bd = requisicao.result; var armazena = bd.createObjectStore("livros", {keyPath: "isbn"}); var indiceTitulo = armazena.createIndex("por_titulo", "titulo", {unique: true}); var indiceAutor = armazena.createIndex("por_autor", "autor"); // Inserindo dados sem transações armazena.put({titulo: "Quarry Memories", autor: "Fred", isbn: }); armazena.put({titulo: "Water Buffaloes", autor: "Fred", isbn: }); armazena.put({titulo: "Bedrock Nights", autor: "Barney", isbn: }); }; requisicao.onsuccess = function() { bd = requisicao.result; bd.close(); // fecha o banco interface IDBObjectStore { readonly attribute DOMString name; readonly attribute any keyPath; readonly attribute DOMStringList indexNames; readonly attribute IDBTransaction transaction; readonly attribute boolean autoIncrement; IDBRequest put (any value, optional any key); IDBRequest add (any value, optional any key); IDBRequest delete (any key); IDBRequest get (any key); IDBRequest clear (); IDBRequest openCursor (); IDBIndex createIndex (); IDBIndex index (DOMString name); void deleteIndex (DOMString indexName); IDBRequest count (optional any key); };

7 IndexedDB: Transações
Transações são quaisquer ações tomadas sobre dados em um banco de leitura (readonly) ou de escrita (readwrite). Métodos principais: put (add), get e delete. Note o uso do método add (novos dados), similar ao uso do put (atualiza dados). var transaction = db.transaction(["Estudantes"],"readwrite "); transaction.oncomplete = function(event) { console.log("Sucesso"); }; transaction.onerror = function(event) console.log("Error"); var objectStore = transaction.objectStore("Estudantes"); objectStore.add({Codigo: codigo, nome : nome}); Os eventos onComplete e onError permitem verificar se uma transação foi executado com sucesso ou não no banco

8 var tx = db.transaction("livros", "readonly");
IndexedDB: Cursor O método get retorna dados cujo os indíces são conhecidos, para retornar uma consulta sobre os dados do banco é necesário usar um cursor. var tx = db.transaction("livros", "readonly"); var armazena = tx.objectStore("livros"); var indice = armazena.index("por_autor"); var requisicao = indice.openCursor(IDBKeyRange.only("F red")); // pode ser usar mais uma chave requisicao.onsuccess = function() { var cursor = requisicao.result; if (cursor) { report(cursor.value.isbn, cursor.value.title, cursor.value.author); cursor.continue(); } else { report(null); } }; Mais:

9 Tarefa para Casa 1. Crie um pequeno banco de dados para armazenar clientes e produtos usando WebSQL ou IndexedDB para os navegadores compatíveis com HTML5.

10 Fim rafastv.responde@gmail.com