How can i use the database sqlite in my application?

Question

I'm trying to connect the database with my system but always after call the function shows like this in apliccation's browser:

The "granjas" table is empty

Here's the code:

ON JS:

var db = openDatabase("Meubanco", "3.0", "Mybase", 6000);
db.transaction(function(criar){
 criar.executeSql("CREATE TABLE granjas (ID INTEGER PRIMARY KEY AUTOINCREMENT, nome TEXT, email TEXT, cnpj TEXT)");
});
function cadastrar(){
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var cnpj = document.getElementById("cnpj").value;
db.transaction(function(armazenar){
 armazenar.executeSql("INSERT INTO granjas (nome, email, cnpj) VALUES (?,[email protected],?)", [nome, email, cnpj]);
 alert("Granja " + document.getElementById("nome").value + " Cadastrada!");
 });
};

AND ON HTML:

<form onsubmit="cadastrar();">
 <div class="form-group">
 <label>Nome</label>
 <input type="text" class="form-control" id="nome" placeholder="nome">
 </div>
 <div class="form-group">
 <label for="exampleInputEmail1">Endereço de email</label>
 <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="email">
 </div>
 <div class="form-group">
 <label>CNPJ</label>
 <input type="text" class="form-control" id="cnpj" placeholder="cnpj">
 </div>
 <form>
 <div class="form-group">
 <label for="exampleFormControlFile1">Insira uma imagem da granja<small id="emailHelp" class="form-text text-muted">Ação Opcional.</small></label>
 <input type="file" class="form-control-file" id="imagem_da_empresa"/>
 </div>
 </form>
 <button type="button" class="btn btn-primary" onclick="cadastrar();">Cadastrar</button>
 <a type="button" class="btn btn-outline-info" href="listagem_de_granjas.html">Granjas Cadastrdas</a>
</form>

I think it is clear what i want to do. Here's a link to the project: https://github.com/Nidhoggui/beta-_projetoavicultura

• DVN-Anakin: In browser's developer tools click on the Network tab on the left from Application. Is there any error with submitting data into the database?
• L. Guilherme P. Melquiades: No, it just doesn't send the data to database
• DVN-Anakin: see the answer below

Answer 1

Problem

email?email.com is causing the problem in

armazenar.executeSql("INSERT INTO granjas (nome, email?email.com, cnpj) VALUES (?,?,?)", [nome, email, cnpj])

Explanation

Function .executeSql() accepts success and error callbacks - You can use them to see if .executeSql() was executed correctly:

armazenar
 .executeSql(
 "INSERT INTO granjas (nome, email, cnpj) VALUES (?,?email.com,?)",
 [nome, email, cnpj], 
 function() { console.log("SUCCESS") }, 
 function(data, error) { console.log("There was an ERROR", error) });

The code above will output this error into the console:

SQLError {code: 5, message: "could not prepare statement (1 near "@email": syntax error)"}code: 5message: "could not prepare statement (1 near "@email": syntax error)"__proto__: SQLError 

Solution

function cadastrar(){
 var nome = document.getElementById("nome").value;
 var email = document.getElementById("email").value + '@email.com';
 var cnpj = document.getElementById("cnpj").value;
 db.transaction(function(armazenar){
 armazenar
 .executeSql(
 "INSERT INTO granjas (nome, email, cnpj) VALUES (?,?,?)",
 [nome, email, cnpj], 
 function() { 
 console.log("SUCCESS");
 alert("Granja " + document.getElementById("nome").value + " Cadastrada!");
 }, 
 function(data, error) { 
 console.log("There was an ERROR", error) 
 alert("There was a technical error. Try again.");
 });
 }); 
};