I got this code from Youtube, it’s very useful, but the data is being stored in a websql database, and I would like it to be stored instead in a database file called data.db located in my data folder. How could I do that process using javascript, or node. Not other technologies.
I would like you to help me to store the data in my sqlite database, I attach an image of my structure in case it is needed. I can only use html, css, js and sqlite in my project.
Structure of my project, (sql.js file is not being used)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://requirejs.org/docs/release/2.3.6/r.js"></script>
<script src="main.js"></script>
<script src="banco.js"></script>
<script src="sqlite3.js"></script>
<title>SQLite: Insert, Select & Update</title>
</head>
<body>
<h1>SQLite: Insert, Select & Update</h1>
<div class="aligncenter">
<form class="form">
<input type="hidden" id="field-id" value="" />
<div class="box">
<input type="text" id="field-name"/>
<label for="field-name">Nome</label>
</div>
<div class="box">
<input type="text" id="field-pass"/>
<label for="field-pass">Senha</label>
</div>
<div class="box">
<input type="text" id="field-mail"/>
<label for="field-mail">E-mail</label>
</div>
<div class="per"><a id="btn-salvar" class="button" >SALVAR</a></div>
<div class="per"><a id="btn-deletar" class="button" >DELETAR</a></div>
</form>
<table id="table-register">
<thead>
<th>Nome</th>
<th>Senha</th>
<th>Email</th>
</thead>
<tbody id="tbody-register">
</tbody>
</table>
</div>
</body>
</html>
#JS with the functions
window.addEventListener('load', carregado);
var db = openDatabase("myDB", "1.0", "TiPS Database Example", 2 * 1024 * 1024);
function carregado(){
document.getElementById('btn-salvar').addEventListener('click', salvar);
document.getElementById('btn-deletar').addEventListener('click', deletar);
db.transaction(function(tx) {
//tx.executeSql("DROP TABLE myTable" );
tx.executeSql("CREATE TABLE IF NOT EXISTS myTable ( id INTEGER PRIMARY KEY,nome TEXT,senha TEXT, email TEXT)" );
// tx.executeSql('INSERT INTO myTable ( nome,senha,email) VALUES ("a", "b", "c")');
});
mostrar();
}
function salvar(){
var id = document.getElementById('field-id').value;
var nome = document.getElementById('field-name').value;
var pass = document.getElementById('field-pass').value;
var mail = document.getElementById('field-mail').value;
db.transaction(function(tx) {
if(id){
tx.executeSql('UPDATE myTable SET nome=?, senha=?, email=? WHERE id=?', [nome,pass,mail,id],null);
}else{
tx.executeSql('INSERT INTO myTable ( nome,senha,email) VALUES (?, ?, ?)', [nome,pass,mail]);
}
});
mostrar();
limpaCampo();
inputSHOW(false);
}
function mostrar(){
var table = document.getElementById('tbody-register');
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM myTable', [], function (tx, resultado) {
var rows = resultado.rows;
var tr = '';
for(var i = 0; i < rows.length; i++){
tr += '<tr>';
tr += '<td onClick="atualizar(' + rows[i].id + ')">' + rows[i].nome + '</td>';
tr += '<td>' + rows[i].senha + '</td>';
tr += '<td>' + rows[i].email + '</td>';
tr += '</tr>';
}
table.innerHTML = tr;
}, null);
});
}
function atualizar(_id){
var id = document.getElementById('field-id');
var nome = document.getElementById('field-name');
var pass = document.getElementById('field-pass');
var mail = document.getElementById('field-mail');
id.value = _id;
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM myTable WHERE id=?', [_id], function (tx, resultado) {
var rows = resultado.rows[0];
nome.value = rows.nome ;
pass.value = rows.senha ;
mail.value = rows.email ;
});
});
inputSHOW(true);
}
function deletar(){
var id = document.getElementById('field-id').value;
db.transaction(function(tx) {
tx.executeSql("DELETE FROM myTable WHERE id=?", [id]);
});
mostrar();
limpaCampo();
inputSHOW(false);
}
This code is not important. But I always attach it
JS
window.addEventListener('load',carrega);
function carrega(){
document.getElementById('field-name').addEventListener('blur', leave);
document.getElementById('field-pass').addEventListener('blur', leave);
document.getElementById('field-mail').addEventListener('blur', leave);
}
function leave(){
if(this.value != ''){
this.offsetParent.className += " ativo";
}else{
this.offsetParent.className = 'box';
}
}
function inputSHOW(_show){
if(_show){
document.getElementById('field-name').offsetParent.className += " ativo";
document.getElementById('field-pass').offsetParent.className += " ativo";
document.getElementById('field-mail').offsetParent.className += " ativo";
document.getElementById('btn-deletar').style.display = 'block';
}else{
document.getElementById('field-name').offsetParent.className = 'box';
document.getElementById('field-pass').offsetParent.className = 'box';
document.getElementById('field-mail').offsetParent.className = 'box';
//document.getElementById('btn-deletar').style.display = 'none';
}
}
function limpaCampo(){
document.getElementById('field-id').value = '';
document.getElementById('field-name').value = '';
document.getElementById('field-pass').value = '';
document.getElementById('field-mail').value = '';
}
