Web sql

grossbergsteven · #1 (**permalink**) 29/01/2015, 12:09

Buenas tardes, estoy trabajando en una base de datos web de html 5, ya cree el codigo para hacer la tabla e insertar datos en ella, y todo funciona bien, solo necesito ayuda para mostar los datos de la base de datos.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NBA</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="">
    <script type="text/javascript">
    var db = openDatabase("logros", "1.0", "", 2 * 1024 * 1024);
    db.transaction(function (tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS juego (id unique, fecha, deporte, status, id_liga, id_deporte, id_inca)');
    tx.executeSql('CREATE TABLE IF NOT EXISTS logro (id unique, id_juego, referencia, id_equipo, nombre, ml, rl, rll, srl, srll, ab, abl, pml, prl, prll, pab, pabl, inning, anota, gt, gtl)');
    tx.executeSql('CREATE TABLE IF NOT EXISTS score (id, id_juego, nombre)');
    tx.executeSql('INSERT INTO juego (id, fecha, deporte) VALUES (23, "29/01/2015", "NBA")');
    tx.executeSql('INSERT INTO juego (id, fecha, deporte) VALUES (24, "29/01/2015", "NBA")');
    tx.executeSql('INSERT INTO logro (id, id_juego, referencia) VALUES (4, 006, 23751)');
    logro = tx.executeSql('select * from juego WHERE id=?',[]);
    alert(logro);
  });
    </script>
</head>
<body>
    <table id="logros" border="1 px">
    <tr>
      <td colspan=3></td>
      <td colspan= 3>Juego completo</td>
      <td colspan= 3>Primera mitad</td>
    </tr>
    <tr>
      <td>Fecha/Hora</td>
      <td>Ref</td>
      <td>Equipo</td>
      <td>ML</td>
      <td>A/B</td>
      <td>RL</td>
      <td>ML</td>
      <td>A/B</td>
      <td>RL</td>
    </tr>
  </table>
</body>
</html>

grossbergsteven · #2 (**permalink**) 29/01/2015, 13:58

solo necesito ayuda para mostrar un registro de la tabla juego

jgm_sala · #3 (**permalink**) 30/01/2015, 04:06

Hola,

desde javascript no puedes acceder a tu base de datos, necesitas hacerlo desde el lado del servidor (php, java, etc)

Un saludo

fede5426 · #4 (**permalink**) 30/01/2015, 05:35

Con php..

Código PHP:

Ver original<?php 
 
//conectar con la base de datos
$con= mysqli_connect("host", "user", "pass", "db") or die ("No se pudo conectar con la base de datos");
 
//hacer la consulta a la base de datos
$consulta= "SELECT * FROM juego";
$query= mysqli_query("$con, $consulta") or die (mysql_error());
 
 
//almacenar los datos de la tabla en un array y mostrarlos con un bucle while
while($array=mysqli_fetch_array($query)){
    echo <tr>;
    echo "<td>" .$array['id']. "</td>";
    echo "<td>" .$array['fecha']. "</td>";
    echo "<td>" .$array['deporte']. "</td>";
    echo </tr>;
}
 
?>

grossbergsteven · #5 (**permalink**) 30/01/2015, 08:26

Muchas gracias por tu respuesta, el asunto es que como estoy usando html la sintaxis es diferente ya que utiliza javascript, pero muchas gracias por tu ayuda, si alguien tiene idea y me puede ayudar se los agradecere

gnzsoloyo · #6 (**permalink**) 01/02/2015, 05:59

¿Entendiste que con JavaScript NO PUEDES comunicarte con la base de datos?
Es simplemente imposible porque ese lenguaje carece de recursos para realizar eso. El JavaScript trabaja en el navegador, el cliente, mientras que la base de datos esta en el servidor. Sólo un lenguaje del lado del servidor puede comunicarse con la base de datos.
Por eso usas ajax, pero el ajax requiere programar en PHP lo que se tiene que hacer en el servidor. ¿Se entiende?
Y NUNCA escribes el SQL en el JavaScript... Quieres que todos lo puedan ver?
Puedes preguntar todas las veces que quieras, pero la respuesta seguirá siendo la misma.

pzin · #7 (**permalink**) 01/02/2015, 08:14

Supongo que se refiere a usar las bases de datos de HTML5.

gnzsoloyo · #8 (**permalink**) 01/02/2015, 08:38

OK, eso hace la pregunta algo más entendible, aunque de todos modos en ese caso está entrando en un terreno algo dificil.
Es algo relativamente nuevo...

Por lo pronto, si ese es el caso podría simplemente seguir los tutoriales disponibles y luego ver qué no le sale: http://www.tutorialspoint.com/html5/html5_web_sql.htm

grossbergsteven · #9 (**permalink**) 02/02/2015, 10:42

Si específicamente es Web Sql de HTML5 ya he logrado algo les pongo el código a ver si a alguien le sirve, al solucionarlo por completo subo todo el código como contribución

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>NBA</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
var db = openDatabase('logros540', '1.0', 'Logros', 1024);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS juego (id unique, fecha, deporte, status, id_liga, id_deporte, id_inca)');
  tx.executeSql('CREATE TABLE IF NOT EXISTS logro (id unique, id_juego, referencia, id_equipo, nombre, ml, rl, rll, srl, srll, ab, abl, pml, prl, prll, pab, pabl, inning, anota, gt, gtl)');
  tx.executeSql('CREATE TABLE IF NOT EXISTS score (id, id_juego, nombre)');
  tx.executeSql('INSERT INTO juego (fecha) VALUES ("02/02/2015")');
  tx.executeSql('INSERT INTO logro (referencia, nombre) VALUES ("23571", "Chicago Bull")');
  //tx.executeSql('INSERT INTO juego (id, fecha) VALUES (4, "02/02/2015")');
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM juego', [], function (tx, results) {
   var len = results.rows.length, i;
   for (i = 0; i < len; i++){
    msg = "<td>"+ results.rows.item(i).fecha + "</td>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);//cierre de funcion 
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM logro', [], function (tx, results) {
   var len = results.rows.length, i;
   for (i = 0; i < len; i++){
    msg = "<td>" + results.rows.item(i).referencia + "</td>" + "<td>" + results.rows.item(i).nombre + "</td>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);//cierre de funcion 
});
</script>
</head>
<body>
  <table id="status" border="1 px">
    <tr>
      <td colspan=3></td>
      <td colspan= 3>Juego completo</td>
      <td colspan= 3>Primera mitad</td>
    </tr>
    <tr>
      <td>Fecha/Hora</td>
      <td>Ref</td>
      <td>Equipo</td>
      <td>ML</td>
      <td>A/B</td>
      <td>RL</td>
      <td>ML</td>
      <td>A/B</td>
      <td>RL</td>
    </tr>
  </table>
</body>
</html>

Nedned · #10 (**permalink**) 02/02/2015, 10:57

Interesante, tendré que reciclarme hacia html5... con lo que me gusta php... :(

Saludos

grossbergsteven · #11 (**permalink**) 02/02/2015, 11:44

Si HTML5 permite crear base de datos locales, osea del lado del cliente, esto abre un mundo de posibilidades, en mi caso estoy programando una aplicación para logros de parley, los datos vienen en push por RabbitMq para luego ser mostrados