• Sábado 16 de Noviembre de 2024, 07:37
« anterior próximo »
Páginas: [1]

Autor Tema:  Aplicacion html5+sqlite en 3 capas  (Leído 13059 veces)

Thanatos-chan

  • Miembro MUY activo
  • ***
  • Mensajes: 136
  • Nacionalidad: do
    • Ver Perfil
Aplicacion html5+sqlite en 3 capas
« en: Miércoles 22 de Agosto de 2012, 02:05 »
0
Ondas,

Estoy haciendo una aplicacion en html5+sqlite, y me entra la pregunta porque todos los site que encuentro tienen el javascript pegado como script en el mismo archivo.

Consulta:  alguien ya ha tenido experiencia con aplicaciones sqlite que me recomiende un esquema de trabajo?

actualmente estoy usando phonegap+html5+jquery+sqlite para hacer una app mi tablet

aqui el ejemplo normalito que aparece en google.

mi pregunta es si puedo aislar toda la funcionalidad sqlite en un archivo  digamos myappsqlite.js y invocarlo desde la aplicacion.

Gracias.

Código: HTML
  1.         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>SQL Storage</title>
  6.   <body>    
  7.    <br/><br/>
  8.     <div align="center">
  9.      <input type="hidden" id="id"/>
  10.      First name:<input type="text" id="firstName"/><br/>
  11.      Last name:<input type="text" id="lastName"/><br/>
  12.      Phone: <input type="text" id="phone"/><br/>
  13.      <button onClick="resetForm()">Reset Form</button>
  14.      <button onClick="updateRecord()">Update</button>
  15.      <button onClick="insertRecord()">Insert</button>
  16.         <button onClick="dropTable()">Drop Table</button>
  17.      <div id="results"></div>
  18.     </div>
  19.   </body>
  20.  
  21.     <script>
  22.  var results = document.getElementById('results');
  23.  var id = document.getElementById('id');
  24.  var firstName = document.getElementById('firstName');  
  25.  var lastName = document.getElementById('lastName');  
  26.  var phone = document.getElementById('phone');
  27.    
  28.  var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
  29.  var selectAllStatement = "SELECT * FROM Contacts";
  30.  var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";
  31.  var updateStatement = "UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?";
  32.  var deleteStatement = "DELETE FROM Contacts WHERE id=?";
  33.  var dropStatement = "DROP TABLE Contacts";
  34.  
  35.  var db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
  36.  var dataset;
  37.  createTable();
  38.  
  39.       function onError(tx, error) {
  40.         alert(error.message);
  41.       }
  42.      
  43.       function showRecords() {
  44.         results.innerHTML = '';
  45.         db.transaction(function(tx) {
  46.           tx.executeSql(selectAllStatement, [], function(tx, result) {
  47. dataset = result.rows;
  48.             for (var i = 0, item = null; i < dataset.length; i++) {
  49.              item = dataset.item(i);
  50.              results.innerHTML +=
  51.                  '<li>' + item['lastName'] + ' , ' + item['firstName'] + ' <a href="#" onclick="loadRecord('+i+')">edit</a>  ' +  
  52.  '<a href="#" onclick="deleteRecord('+item['id']+')">delete</a></li>';
  53. }
  54.           });
  55.         });
  56.       }
  57.      
  58.       function createTable() {
  59.         db.transaction(function(tx) {
  60.           tx.executeSql(createStatement, [], showRecords, onError);
  61.         });
  62.       }
  63.      
  64.       function insertRecord() {
  65.         db.transaction(function(tx) {
  66.           tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
  67.         });
  68.       }
  69.      
  70.  function loadRecord(i) {
  71. var item = dataset.item(i);
  72.         firstName.value = item['firstName'];
  73. lastName.value = item['lastName'];
  74. phone.value = item['phone'];
  75. id.value = item['id'];
  76.       }
  77.  
  78.       function updateRecord() {
  79.         db.transaction(function(tx) {
  80.           tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
  81.         });
  82.       }
  83.      
  84.       function deleteRecord(id) {
  85.         db.transaction(function(tx) {
  86.           tx.executeSql(deleteStatement, [id], showRecords, onError);
  87.         });
  88. resetForm();
  89.       }
  90.        
  91.       function dropTable() {
  92.         db.transaction(function(tx) {
  93.           tx.executeSql(dropStatement, [], showRecords, onError);
  94.         });
  95. resetForm();
  96.       }
  97.  
  98.  function loadAndReset(){
  99.  resetForm();
  100.  showRecords();
  101.  }
  102.  
  103.  function resetForm(){
  104. firstName.value = '';
  105. lastName.value = '';
  106. phone.value = '';
  107. id.value = '';
  108.  }
  109.     </script>
  110. </html>​
  111.  
  112.  
« última modificación: Miércoles 22 de Agosto de 2012, 02:07 por Thanatos-chan »
Que es un genio???? yo superare a un genio con trabajo duro, y eso es todo.

RadicalEd

  • Moderador
  • ******
  • Mensajes: 2430
  • Nacionalidad: co
    • Ver Perfil
Re:Aplicacion html5+sqlite en 3 capas
« Respuesta #1 en: Miércoles 22 de Agosto de 2012, 04:51 »
0
Solo separalo en 2 archivos
Código: HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>SQL Storage</title>
  6.   <body>    
  7.    <br/><br/>
  8.     <div align="center">
  9.      <input type="hidden" id="id"/>
  10.      First name:<input type="text" id="firstName"/><br/>
  11.      Last name:<input type="text" id="lastName"/><br/>
  12.      Phone: <input type="text" id="phone"/><br/>
  13.      <button onClick="resetForm()">Reset Form</button>
  14.      <button onClick="updateRecord()">Update</button>
  15.      <button onClick="insertRecord()">Insert</button>
  16.         <button onClick="dropTable()">Drop Table</button>
  17.      <div id="results"></div>
  18.     </div>
  19.   </body>
  20.  
  21.     <script type="text/javascript" src="myappsqlite.js">
  22.     </script>
  23. </html>​
  24.  
Código: Javascript
  1.  var results = document.getElementById('results');
  2.  var id = document.getElementById('id');
  3.  var firstName = document.getElementById('firstName');  
  4.  var lastName = document.getElementById('lastName');  
  5.  var phone = document.getElementById('phone');
  6.    
  7.  var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
  8.  var selectAllStatement = "SELECT * FROM Contacts";
  9.  var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";
  10.  var updateStatement = "UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?";
  11.  var deleteStatement = "DELETE FROM Contacts WHERE id=?";
  12.  var dropStatement = "DROP TABLE Contacts";
  13.  
  14.  var db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
  15.  var dataset;
  16.  createTable();
  17.  
  18.       function onError(tx, error) {
  19.         alert(error.message);
  20.       }
  21.      
  22.       function showRecords() {
  23.         results.innerHTML = '';
  24.         db.transaction(function(tx) {
  25.           tx.executeSql(selectAllStatement, [], function(tx, result) {
  26. dataset = result.rows;
  27.             for (var i = 0, item = null; i < dataset.length; i++) {
  28.              item = dataset.item(i);
  29.              results.innerHTML +=
  30.                  '<li>' + item['lastName'] + ' , ' + item['firstName'] + ' <a href="#" onclick="loadRecord('+i+')">edit</a>  ' +  
  31.  '<a href="#" onclick="deleteRecord('+item['id']+')">delete</a></li>';
  32. }
  33.           });
  34.         });
  35.       }
  36.      
  37.       function createTable() {
  38.         db.transaction(function(tx) {
  39.           tx.executeSql(createStatement, [], showRecords, onError);
  40.         });
  41.       }
  42.      
  43.       function insertRecord() {
  44.         db.transaction(function(tx) {
  45.           tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
  46.         });
  47.       }
  48.      
  49.  function loadRecord(i) {
  50. var item = dataset.item(i);
  51.         firstName.value = item['firstName'];
  52. lastName.value = item['lastName'];
  53. phone.value = item['phone'];
  54. id.value = item['id'];
  55.       }
  56.  
  57.       function updateRecord() {
  58.         db.transaction(function(tx) {
  59.           tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
  60.         });
  61.       }
  62.      
  63.       function deleteRecord(id) {
  64.         db.transaction(function(tx) {
  65.           tx.executeSql(deleteStatement, [id], showRecords, onError);
  66.         });
  67. resetForm();
  68.       }
  69.        
  70.       function dropTable() {
  71.         db.transaction(function(tx) {
  72.           tx.executeSql(dropStatement, [], showRecords, onError);
  73.         });
  74. resetForm();
  75.       }
  76.  
  77.  function loadAndReset(){
  78.  resetForm();
  79.  showRecords();
  80.  }
  81.  
  82.  function resetForm(){
  83. firstName.value = '';
  84. lastName.value = '';
  85. phone.value = '';
  86. id.value = '';
  87.  }

Pregunta???
Nunca había probado hacer esto, sabes dónde queda guardada la información, ósea, dónde queda la DB?
El pasado son solo recuerdos, el futuro son solo sueños

Thanatos-chan

  • Miembro MUY activo
  • ***
  • Mensajes: 136
  • Nacionalidad: do
    • Ver Perfil
Re:Aplicacion html5+sqlite en 3 capas
« Respuesta #2 en: Miércoles 22 de Agosto de 2012, 05:40 »
0
Cita de: Edo en Miércoles 22 de Agosto de 2012, 04:51
Solo separalo en 2 archivos

yeah, ya los habia separado en html y js, lo que se me paso era que no puse el js en el www y no lo veia... :whistling: un error de capa 8.


Cita de: Edo en Miércoles 22 de Agosto de 2012, 04:51
Pregunta???
Nunca había probado hacer esto, sabes dónde queda guardada la información, ósea, dónde queda la DB?

Para hacer aplicaciones de tablet esta genial. con tan solo
Código: Javascript
  1. var db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
  2.  

Se esta creando una instancia de base de datos de sqlite. mientras esta en la aplicacion esta metida en el .cache pero la base de datos entera es un solo archivo .sqlite

para jugar con ella puedes instalar el plugin de firefox de sqlite Manager


Que es un genio???? yo superare a un genio con trabajo duro, y eso es todo.
Páginas: [1]
« anterior próximo »