In questo esercizio, che esegue il semplice calcolo di una radice quadrata di un numero, utilizzo:
- Bootstrap per creare il form di inserimento del numero e dei bottoni di submit e reset
- PHP, jQuery e AJAX per controllare la validità del numero fornito in input, calcolare la radice quadrata e visualizzare il risultato senza aggiornare la pagina
L'esercizio introduce all'uso (consigliatissimo) di Bootstrap, il framework HTML, CSS e JavaScript più diffuso ed utilizzato per la realizzazione di siti Web responsive e mobile-first. Bootstrap è gratuito e liberamente scaricabile ed è supportato da una documentazione eccellente.
form_rq.html <!DOCTYPE html> <html lang="it"> <head> <title>Calcolo radice quadrata</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Possiamo includere Bootstrap da un CDN (Content Delivery Network). MaxCDN fornisce supporto CDN per il CSS di Bootstrap. --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <script type="text/javascript"> $(document).ready(function() { // $('#submit').click(function() { var num=$("#numero").val(); if(num=="") { alert("Inserire il numero"); return false; } if(num<=0){ alert("Il numero deve essere >0"); return false; } //chiamata ajax $.ajax( { type: "POST", url: "radiceq.php", data: 'numero='+num, cache:false, success: function (risposta) { $('#risultato').val(risposta); } }); return false; }); }); </script> <body style="background-color:#fafafa"> <div class="container" style="width:500px;background-color:#ffffff;margin-top:50px;border:1px solid #888888"> <h1>Calcolo radice quadrata</h1> <form name="form1" method="post" action=""> <div class="form-group"> <label for="num">Numero:</label> <input type="number" id="numero" class="form-control" style="width:200px" > </div> <button type="submit" id="submit" class="btn btn-default" style="width:98px">Calcola</button> <button type="reset" id="submit" class="btn btn-default" style="width:98px">Reset</button><br/><br/> <div class="form-group"> <label for="risultato">Risultato:</label> <input type="text" id="risultato" class="form-control" style="width:200px" readonly> </div> <br/> </form> </div> </body> </html>
radiceq.php
<?php $num=$_POST["numero"]; echo sqrt($num); ?>