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à![Confused :confused: :confused:](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
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....![Mad :mad: :mad:](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
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);
?>