Ci siamo occupati in precedenti articoli di come i linguaggi PHP, Ajax e jQuery realizzano chiamate asincrone per la gestione dei dati. Se adesso volete arricchire le vostre web application vuol dire che l’impatto grafico delle vostre applicazioni comincia ad essere rilevante. Molti sono gli esempi in cui è utile mostrare ad un utente la barra di avanzamento:
- Visualizzazione del processo di download di un file
- Monitorare il processo di caricamento dei file
- Invio, inserimento, aggiornamento o cancellazione dei dati da un modulo form ad un database
Quindi, l’utente con questo ausilio grafico, può capire se i suoi dati sono stati elaborati. In questa ottica è utile la barra di avanzamento nel nostro sviluppo delle nostre applicazioni per il web. Non vi resta che realizzare e provare il nostro script.
Indice
Prerequisiti per la realizzazione
Ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti strumenti software, tutti liberamente scaricabili e senza costi di licenza:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Ovviamente è necessaria un pò di dimestichezza con la programmazione e almeno la minima conoscenza teorica dei linguaggi di cui si parla. A tale proposito abbiamo dedicato una sezione del sito in cui affrontiamo l’introduzione al linguaggio con un Corso PHP. Chi vuole può iniziare ad avvicinarsi al linguaggio più utilizzato sul web.
Lo script e la sua logica
Nell’esempio che segue, abbiamo definito come creare una barra di avanzamento utilizzando jQuery Bootstrap con Ajax e PHP. Qui abbiamo usato lo script PHP per l’elaborazione dei dati lato server e per il lato client abbiamo usato Ajax jQuery e Bootstrap. Ajax è stato utilizzato per inviare dati al server, jQuery è stato utilizzato per la convalida dei dati dei moduli e per continuare l’esecuzione della funzione e infine è stato utilizzato bootstrap per creare barra di avanzamento. Quando l’utente ha compilato il modulo e tutti i dati sono stati convalidati con successo, i dati saranno inviati al server utilizzando Ajax, quando i dati sono stati inseriti nella tabella del database MySQL, in quel momento verrà visualizzato l’inserimento dei dati nella barra di avanzamento, con un evidente incremento delle prestazioni grafiche dell’interfaccia utente della vostra applicazione!
Creazione del Data Base test per le vostre prove
Se avete un po di dimestichezza con l’ambiente phpMyAdmin sara relativamente semplice creare un nuovo data base. Vorremmo ricordare che all’argomento abbiamo dedicato gli articoli sulle nuove transazioni PDO da e verso un data base MySQL parlando di PHP Data Object Parte 1a e Parte 2a che vi invitiamo a leggere. Innanzitutto dobbiamo creare il nostro database test per le prove con la tabella autori.
-- -- Database: `test` -- -- -------------------------------------------------------- -- -- Struttura della tabella `autori` -- CREATE TABLE `autori` ( `id` int(11) NOT NULL, `nome` varchar(250) NOT NULL, `cognome` varchar(250) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; -- -- Indici per la tabella `autori` -- ALTER TABLE `autori` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT per la tabella `autori` -- ALTER TABLE `autori` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
La pagina index.php parte HEAD
<?php //index.php ?> <!DOCTYPE html> <html> <head> <title>How to Create Progress Bar for Data Insert in PHP using Ajax</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>
Pagina index.php parte BODY
<body> <br /> <div class="container"> <h1 align="center">Barra di avanzamento per inserimento dei dati con PHP e Ajax</h1><br/> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Enter Data</h3> </div> <div class="panel-body"> <span id="success_message"></span> <form method="post" id="form_inserimento_dati"> <div class="form-group"> <label>Nome</label> <input type="text" name="nome" id="nome" class="form-control" /> <span id="nome_error" class="text-danger"></span> </div> <div class="form-group"> <label>Cognome</label> <input type="text" name="cognome" id="cognome" class="form-control" /> <span id="cognome_error" class="text-danger"></span> </div> <div class="form-group" align="center"> <input type="submit" name="save" id="save" class="btn btn-info" value="Save" /> </div> </form> <div class="form-group" id="process" style="display:none;"> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=""> </div> </div> </div> </div> </div> </div> </body> </html> .... segue con lo script
Infine la pagina index.php con lo script
Infine da inserire subito dopo il tag </html> lo script JQuery con la gestione Ajax delle transazioni da e verso il data base.
<script>
$(document).ready(function(){
$('#form_inserimento_dati').on('submit', function(event){
event.preventDefault();
var count_error = 0;
if($('#nome').val() == '')
{
$('#nome_error').text('Il campo Nome è richiesto!');
count_error++;
}
else
{
$('#nome_error').text('');
}
if($('#cognome').val() == '')
{
$('#cognome_error').text('Il campo Cognome è richiesto!');
count_error++;
}
else
{
$('#cognome_error').text('');
}
if(count_error == 0)
{
$.ajax({
url:"process.php",
method:"POST",
data:$(this).serialize(),
beforeSend:function()
{
$('#save').attr('disabled', 'disabled');
$('#process').css('display', 'block');
},
success:function(data)
{
var percentage = 0;
var timer = setInterval(function(){
percentage = percentage + 20;
progress_bar_process(percentage, timer);
}, 1000);
}
})
}
else
{
return false;
}
});
function progress_bar_process(percentage, timer)
{
$('.progress-bar').css('width', percentage + '%');
if(percentage > 100)
{
clearInterval(timer);
$('#sample_form')[0].reset();
$('#process').css('display', 'none');
$('.progress-bar').css('width', '0%');
$('#save').attr('disabled', false);
$('#success_message').html("<div class='alert alert-success'>Dati Salvati nel DB</div>");
setTimeout(function(){
$('#success_message').html('');
}, 5000);
}
}
});
</script>
La pagina process.php
Infine bisogna realizzare la pagina che gestisce l’inserimento dei dati nel data base. Bisogna ricordare di inserire i valori corretti dell’user_name, in genere root, e la password del data base:
<?php
$connect = new PDO("mysql:host=localhost; dbname=test", "user_name", "password");
if(isset($_POST["nome"]))
{
$data = array(
':nome' => trim($_POST["nome"]),
':cognome' => trim($_POST["cognome"])
);
$query = "
INSERT INTO autori
(nome, cognome)
VALUES (:nome, :cognome)
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo 'Terminato';
}
?>
Considerazioni finali
Abbiamo visto in questo articolo uno script su come creare una barra di avanzamento per l’inserimento di dati con PHP e Ajax. L’argomento è molto importante e vi abbiamo illustrato le ultimissime transazioni PDO da e verso un database MySQL. Sull’argomento abbiamo dedicato gli articoli sulle nuove transazioni PDO da e verso un data Base MySQL parlando di PHP Data Object Parte 1a e Parte 2a che vi invitiamo a leggere a a provare. La sicurezza delle vostre applicazioni per il web è il primo elemento da affrontare anche e soprattutto nella gestione dei dati e degli accessi ad un Data Base MySQL. Ricordiamo che questo Portale ha tutta una sezione riservata al linguaggio di programmazione PHP. In questa sezione oltre a tanti esempi di codice, troverete anche strumenti utili per la programmazione come Framework, librerie e tanto altro. Vi invitiamo quindi a visitare questa sezione del sito e ricordiamo che è disponibile anche una sezione esempi di codice PHP come quello che abbiamo proposto in questo articolo.