Buongiorno a tutti
Per un progetto aziendale, sto cercando di trasportare un vecchio sito PHP in javascript, per migliorare molti aspetti.
In queste ultime due settimane ho fatto un corso di javascript; quindi al momento non ho molta esperienza con il codice anche se ci sto provando.
Vi spiego cosa devo fare:
Nella tabella "schede" ho il tempo di realizzazione di una scatola in produzione, il tipo di scatola, il materiale ed i pezzi fatti per quella commessa ed altri dati accessori. Quindi:
- Ho una banale tabella HTML, con i campi che riportano i dati presenti su una tabella mySQL presente sul server XAMPP
- Ho un file connessione.js, che gestisce una chiamata AJAX al server dove c'è questa tabella mySQL
- Ho un file data.php, che esegue la query sulla tabella "schede" (in questo caso) e riporta il risultato a connessione.js sotto forma di JSON.
Ora, il risultato in questione viene riportato dopo circa 10 secondi (la tabella ha più di 30.000 righe...) quindi rispetto al PHP la velocità è decisamente aumentata. Quando invece dovrò maneggiare tabelle con 1.000.000 di righe esattamente non so cosa succederà
il punto della questione è:
come faccio a visualizzare lo stato ed il progresso della richiesta di estrazione dati dalla tabella?
Cosa importante: mi è stato suggerito nel corso di non utilizzare jquery, in quanto è una libreria che sta andando deprecata.
Su internet infatti trovo esempi di progressbar fatti proprio con jquery....
Per un progetto aziendale, sto cercando di trasportare un vecchio sito PHP in javascript, per migliorare molti aspetti.
In queste ultime due settimane ho fatto un corso di javascript; quindi al momento non ho molta esperienza con il codice anche se ci sto provando.
Vi spiego cosa devo fare:
Nella tabella "schede" ho il tempo di realizzazione di una scatola in produzione, il tipo di scatola, il materiale ed i pezzi fatti per quella commessa ed altri dati accessori. Quindi:
- Ho una banale tabella HTML, con i campi che riportano i dati presenti su una tabella mySQL presente sul server XAMPP
- Ho un file connessione.js, che gestisce una chiamata AJAX al server dove c'è questa tabella mySQL
- Ho un file data.php, che esegue la query sulla tabella "schede" (in questo caso) e riporta il risultato a connessione.js sotto forma di JSON.
Ora, il risultato in questione viene riportato dopo circa 10 secondi (la tabella ha più di 30.000 righe...) quindi rispetto al PHP la velocità è decisamente aumentata. Quando invece dovrò maneggiare tabelle con 1.000.000 di righe esattamente non so cosa succederà
il punto della questione è:
come faccio a visualizzare lo stato ed il progresso della richiesta di estrazione dati dalla tabella?
Cosa importante: mi è stato suggerito nel corso di non utilizzare jquery, in quanto è una libreria che sta andando deprecata.
Su internet infatti trovo esempi di progressbar fatti proprio con jquery....
HTML:
<table>
<tr>
<th>Scheda</th>
<th>Tempo taglio</th>
<th>Tipo scatola</th>
<th>Materiale</th>
<th>Area</th>
<th>Pezzi</th>
<th>Metodo</th>
<th>Anomalia</th>
<th>Data produzione</th>
<th>Macchina</th>
</tr>
<tbody id="corpotabella">
<!--i dati verranno visualizzati qui-->
</tbody>
</table>
<script src='connessione.js'></script>
JavaScript:
//chiamiamo ajax
var ajax = new XMLHttpRequest();
var method = 'GET';
var url = './data.php';
var asincrono = true;
ajax.open(method, url, asincrono);
//sending ajax request
ajax.send();
//receveing response from data.php
ajax.onreadystatechange = function(){
if ((this.readyState == 4) && (this.status==200)){
//converting JSON back to array
var data = JSON.parse(this.responseText);
console.log(data); //for debugging
//html value for <tbody>
var html = "";
//looping through the data
for(var a=0 ; a < data.length ; a++){
var scheda = data[a].scheda;
var tempotaglio = data[a].tempotaglio;
var tiposcatola = data[a].tiposcatola;
var materiale = data[a].materiale;
var area = data[a].area;
var pezzi = data[a].pezzi;
var metodo = data[a].metodo;
var anomalia = data[a].anomalia;
var dataproduzione = data[a].dataproduzione;
var macchina = data[a].macchina;
//appending at HTML
html = html + '<tr>';
html = html + '<td>' + scheda + '</td>';
html = html + '<td>' + tempotaglio + '</td>';
html = html + '<td>' + tiposcatola + '</td>';
html = html + '<td>' + materiale + '</td>';
html = html + '<td>' + area + '</td>';
html = html + '<td>' + pezzi + '</td>';
html = html + '<td>' + metodo + '</td>';
html = html + '<td>' + anomalia + '</td>';
html = html + '<td>' + dataproduzione + '</td>';
html = html + '<td>' + macchina + '</td>';
html = html + '</tr>';
};
//replacing the <tbody> of <table>
document.getElementById("corpotabella").innerHTML = html;
};
};
PHP:
<?php
//getting data from database
$conn = mysqli_connect("localhost", "root", "", "packcart4");
//getting data from utenti table
$result = mysqli_query($conn, "SELECT * FROM schede_plotter");
//storing in array
$data = array();
while($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
}
//returning results in JSON format
echo json_encode($data);
?>
ma anche fossero 10mila son sempre troppe. Che sia poi generato attraverso php o javascript, poco cambia. A parte l'attesa del caricamento dei dati, dovresti considerare anche le possibili difficoltà da parte dell'utente nel consultare quella mole di dati.
