Lettura dati in real time

[primoverofantacalcio]

Ciao a tutti, avrei bisogno di una mano per capire come applicare la mia idea sul sito che sto costruendo.

http://primoverofantacalcio.altervista.org/ attualmente la pagina mostra i valori della tabella selezionata in modo statico, e finchè non si aggiorna la pagina intera, non mostrerà i cambiamenti.

Come faccio, o su cosa devo lavorare per avere una lettura in real time dei dati dalla tabella senza dover ricaricarne l'intera pagina.

[mzanella]

Dovresti lavorare in maniera asincrona (AJAX o AJAJ, in parole povere).
Puoi usare un approccio pull, in cui la pagina invia periodicamente una richiesta al server, e si aggiorna di conseguenza.

[primoverofantacalcio]

Grazie per la risposta, siccome non ho nessuna conoscenza di Ajax/Ajaj hai qualche esempio da linkarmi o mostrarmi giusto per capire come funziona?

[mzanella]

Con AJAX puoi inviare una richiesta ad una pagina, ad esempio data.php, la quale altro non sarà che una pagina XML (o JSON, nel caso di AJAJ) generata dinamicamente che contiene i dati.
Quando la richiesta termina, il chiamante aggiorna la pagina con i dati ricevuti (manipolando il DOM).

jQuery è una soluzione piuttosto popolare (in particolare il metodo ajax).
Anche AngularJS offre delle API per richieste asincrone, ma la curva di apprendimento è più ripida rispetto a jQuery.

Ricapitolando:

1. crea una pagina PHP che produca i dati in formato XML o JSON
2. crea una funzione JavaScript che effettui una richiesta asincrona alla suddetta pagina (ad es. tramite jQuery), ottenendo i dati per la tabella
3. crea una funzione JavaScript che, presi in ingresso i dati, crei la tabella (sempre jQuery offre anche delle API per manipolare il DOM)
4. usa un meccanismo di timeout per effettuare periodicamente la richiesta e l'aggiornamento della tabella

Se sei indeciso tra XML e JSON, ti consiglio quest'ultimo. In PHP puoi usare la funzione json_encode per convertire un vettore in formato JSON.
E se ci sono problemi, siamo qui apposta .

[primoverofantacalcio]

Devo essere sincero, non ci ho capito niente in quello che hai spiegato, o comunque non saprei da dove partire.

Il mio approccio alla programmazione è sempre stato guardare tutorial, prove od esempi, replicarli e capire così come funzionano.
Sarà il modo sbagliato ma è il mio metodo e per quello che ho da fare va piuttosto bene.

Nel frattempo ho spulciato ed ho trovato questo esempio, non fa quello che voglio io ma ci va vicino

<script type="text/javascript">
window.onload = function()
{
    var testo = document.getElementById("risultato");
    testo.innerHTML = "Hello, World!";
}
</script>

<div id="risultato"></div>

Per quel che ne so, ogni volta che viene caricata la pagina (grazie a window.onload), mi mostrerà Hello World nella posizione del div="risultato".

C'è il modo di cambiare il codice window.onload con uno che interagisce col pulsante submit del primo box, così ad ogni inserimento, il box si autoaggiorna.

Questo è il codice che viene richiamato nel box a destra, quello della classifica completa insomma.

<?php

include ("connection.php");

// array acquisizione nomi

$player_store = array();
$gol_store = array();
$pos = 1;

// acquisisco id e li salvo negli array

$sql = "SELECT * FROM 1516_marcatori ORDER BY gol DESC";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        array_push($player_store, $row["player"]);
        array_push($gol_store, $row["gol"]);
        }
    } else {
        echo "0 results";
        }

mysqli_close($conn);

echo "\n<table width="90%">\n";

// per ogni valore presente nell'array, stampo nome e gol

for ($i = 0; $i < count($player_store); $i++){

    $data = $player_store[$i];

    include ("connection.php");

    // seleziono calciatore in base a id e stampo nome + gol fatti

    $sql = "SELECT calciatore FROM 1516_listone WHERE id_gio='$data'";
    $result = mysqli_query($conn, $sql);

    
    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {

        echo "\t<tr>\n";
        echo "\t\t<td width="15%"><span class="badge">". $pos .".</span></td>\n";
        echo "\t\t<td width="60%">". $row["calciatore"] ."</td>\n";
        echo "\t\t<td width="25%">". $gol_store[$i] ."</td>\n";
        echo "\t</tr>\n";
        $pos++;
        }
    } else {
        echo "0 results";
    }
    

    mysqli_close($conn);
    }

echo "\n</table>";

?>

[mzanella]

Non conosco tutorial chiari e concisi sull'argomento.
Partendo dal codice che hai mostrato: la stessa pagina gestisce sia le interrogazioni alla base di dati che la loro presentazione. Aggiornamento dei dati (interrogazioni) e pagina (presentazione) coincidono: per come stanno le cose ora, aggiornare i dati implica ricaricare la pagina intera.
L'idea è separare il recupero dei dati dalla loro presentazione.

Premessa: Non ho modo di provare il codice e non escludo che ci siano errori di sintassi o simili.

Interrogare il database: players.php
Occorre creare una pagina separata (players.php) il cui scopo è produrre in output i dati, in un certo formato, ad esempio JSON:

include ("connection.php");

$players = array();
$position = 1;

// Selects identifiers and number of goals of players
$sql = 'SELECT * FROM 1516_marcatori ORDER BY gol DESC';
$result = mysqli_query($conn, $sql);

// For each player, selects its name and create an entry in array "players"
while ($row = mysqli_fetch_assoc($result)) {
    $sql = 'SELECT calciatore FROM 1516_listone WHERE id_gio = "' . $row['player'] . '"';
    $player_result = mysqli_query($conn, $sql);

    // Skips this player if query produced an empty set
    if (mysqli_num_rows($player_result) <= 0) {
        continue;
    }
    $player = mysql_fetch_assoc($player_result);

    $players[] = array(
        "position" => $position++;
        "name"     => $player['calciatore'];
        "goals"    => $row['gol'];
    );
}

mysqli_close($conn);


// Returns data in JSON format
header('Content-Type: application/json');
echo json_encode($players); 

Il vettore $players alla fine ha una struttura di questo tipo:

$players = [
    ["position" => 1, "name" => "HIGUAIN", "goals" => 19],
    ["position" => 2, "name" => "DYBALA", "goals" => 8],
    ...
    ["position" => 5, "name" => "BACCA", "goals" => 6]
]; 

Nota: Ad occhio mi sembra sia possibile ottenere tutti i dati con un'unica interrogazione anziché effettuarne una per ogni giocatore, ma non conoscendo la struttura della base di dati non mi sbilancio.


Recuperare e mostrare i dati: index.php
Ora la pagina index.php ha bisogno di recuperare i dati dalla pagina appena creata. Puoi farlo con jQuery.get():

<html>
  <head>
  ...
  <!-- Includes jQuery -->
  <script src="jquery-1.12.2.min.js"></script>
  ...
  <script>
  /**
   * Updates players' data.
   * Assumes a table with id "players".
   */
  function display_players(players) {
      // Creates every row of the table (just an example, there are indeed cleaner ways...)
      var html = $.map(players, function (player, i) {
          return "<tr><td>" + player.position + "</td><td>" + player.name + "</td><td>" + player.goals + "</td></tr>";
      }).join("");
  
      // Removes old data and add updated one
      $("#players tr").remove();
      $("#players").append(html);
  }

  /**
   * Performs a GET request to obtain (and display) players' data.
   */
  function update_players() {
      $.get( "players.php", display_players);
  }
  </script>
  </head>

  <body>
    ...
    <table id="players">
    </table>
    ...
  </body>
</html>

Naturalmente devi occuparti di rendere disponibile jQuery, scaricando il file JavaScript od usando un CDN.

A questo punto hai a disposizione la funzione update_players che, quando chiamata, aggiorna la sola tabella senza ricaricare la pagina. Puoi creare un pulsante "aggiorna":

<button onclick="update_players()">Aggiorna</button>

Oppure usare setInterval, in modo che l'aggiornamento sia eseguito ogni intervallo fissato di millisecondi:

setInterval(update_players, 5000);

[primoverofantacalcio]

Ciao, alla fine ho risolto in questo modo, non so quanto giusto e corretto sia, ma è efficace al punto giusto

index.php

<!DOCTYPE html>
<html lang="en">
	<head>
	<?php include ("include/meta.php")?>

	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script>
		$(document).ready(function(){
			setInterval(function() {
			$("#players").load("players.php");
			}, 0);
		});

	</script>

	</head>
	<body>
	<?php include ("include/navbar.php")?>

	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading"><h3 class="panel-title">INSERISCI MARCATORI</h3></div>
					<div id="players" class="panel-body">

					</div>
				</div>
			</div>
		</div>
		<hr>
	</div><!-- /.container -->
	<!-- script references -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

players.php

<?php

include ("connection.php");

// array acquisizione nomi

$player_store = array();
$gol_store = array();
$pos = 1;

// acquisisco id e li salvo negli array

$sql = "SELECT * FROM 1516_marcatori ORDER BY gol DESC";
$result = mysqli_query($conn, $sql);

    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        array_push($player_store, $row["player"]);
        array_push($gol_store, $row["gol"]);
        }

mysqli_close($conn);

echo "\n<table width=\"90%\">\n";

include ("connection.php");

// per ogni valore presente nell'array, stampo nome e gol

for ($i = 0; $i < count($player_store); $i++){

    $data = $player_store[$i];

    // seleziono calciatore in base a id e stampo nome + gol fatti

    $sql = "SELECT calciatore FROM 1516_listone WHERE id_gio='$data'";
    $result = mysqli_query($conn, $sql);

    
    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {

        echo "\t<tr>\n";
        echo "\t\t<td width=\"15%\"><span class=\"badge\">". $pos .".</span></td>\n";
        echo "\t\t<td width=\"60%\">". $row["calciatore"] ."</td>\n";
        echo "\t\t<td width=\"25%\">". $gol_store[$i] ."</td>\n";
        echo "\t</tr>\n";
        $pos++;
        }
    } else {
        echo "0 results";
    }
    

    }

    mysqli_close($conn);

echo "\n</table>";

?>

[mzanella]

Ben fatto !
Anche riguardo alla correttezza, non mi sembra ci sia nulla di cui preoccuparsi. Fondamentalmente hai scelto il formato HTML anziché JSON, ma il principio è circa lo stesso.