@CanalQb

HTML - Explorando a Integração de SQLite: Exemplos de Select, Insert, Update e Mais


Se você está interessado em criar aplicações web interativas sem depender de uma linguagem de servidor como PHP ou Python, a combinação de HTML e SQLite pode ser uma alternativa poderosa. Neste post, vamos explorar como você pode usar HTML e a biblioteca JavaScript "sql.js" para realizar operações de banco de dados SQLite diretamente no navegador. Vamos abordar exemplos detalhados de consultas SELECT, INSERT, UPDATE e outras operações, tornando sua experiência de desenvolvimento mais versátil e eficiente.

Introdução

SQLite é um sistema de gerenciamento de banco de dados leve e autônomo, muitas vezes utilizado para armazenar dados localmente em dispositivos ou aplicações web. Ao combinar SQLite com HTML e JavaScript, você pode criar aplicações web que manipulam bancos de dados sem a necessidade de um servidor backend.

Configuração Inicial

Antes de começarmos, certifique-se de incluir a biblioteca "sql.js" no seu arquivo HTML. Você pode fazer isso adicionando o seguinte trecho de código no cabeçalho da página:
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>
Exemplo 1: Consulta SELECT

Aqui está um exemplo de como executar uma consulta SELECT em um banco de dados SQLite usando "sql.js":
<!DOCTYPE html>
<html>
<head>
  <title>Exemplo SELECT</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>
</head>
<body>
  <h1>Exemplo SELECT</h1>
  <div id="resultado"></div>

  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'database.sqlite', true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
      var uInt8Array = new Uint8Array(this.response);
      var db = new SQL.Database(uInt8Array);

      var resultado = db.exec("SELECT * FROM tabela");
      var divResultado = document.getElementById("resultado");
      divResultado.innerHTML = JSON.stringify(resultado);
    };
    xhr.send();
  </script>
</body>
</html>
Exemplo 2: Consulta INSERT e UPDATE

Aqui estão exemplos de como executar consultas INSERT e UPDATE usando "sql.js":
<!-- Código HTML e inclusão da biblioteca sql.js -->

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'database.sqlite', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function (e) {
    var uInt8Array = new Uint8Array(this.response);
    var db = new SQL.Database(uInt8Array);

    // Consulta INSERT
    db.run("INSERT INTO tabela (coluna1, coluna2) VALUES ('valor1', 'valor2')");

    // Consulta UPDATE
    db.run("UPDATE tabela SET coluna1 = 'novo_valor' WHERE coluna2 = 'valor2'");
  };
  xhr.send();
</script>

Conclusão

A integração de HTML e SQLite usando a biblioteca "sql.js" oferece a capacidade de realizar operações de banco de dados diretamente no navegador, simplificando o desenvolvimento de aplicações web interativas e autônomas. Com exemplos de consultas SELECT, INSERT e UPDATE, você pode começar a explorar as possibilidades dessa abordagem e criar aplicações que atendam às suas necessidades específicas.

Esperamos que este post tenha fornecido uma visão detalhada de como utilizar HTML e SQLite para criar aplicações web funcionais sem depender de um servidor backend tradicional.