1. Una form in cui l’utente può scegliere il nome della scuola presso cui si è effettuata la misura da un menù a tendina e inserire la temperatura numerica, il nome, cognome, telefono, codice fiscale dell’utente misurato. La form permette l’inserimento di una misura per volta e le opzioni del menù a tendina devono essere generate dinamicamente a partire da un array/tabella db con i nomi delle scuole(es. ITT Alessandrini, IP Marino, Istituto G. Milli, Liceo A. Einstein ecc).
2. Una pagina di raccolta dei dati che memorizza sul server gli inserimenti fatti col form di cui al punto 1 nella stessa sessione di lavoro, mostrando quante misure sono state inserite per la sessione. Ad ogni dato inserito deve essere associato anche un timestamp dell’inserimento(ad esempio usando la funzione time() che fornisce il numero di secondi fra il tempo presente e 1/1/1970 00:00:00 GMT o la semplice data/ora con la funzione now()).
3. Una pagina di riepilogo che stampa per ogni scuola, cliccabile da un elenco, la temperatura massima più alta e la media della temperatura minima del giorno corrente e dell’ultima settimana.

Si scrivano il form e le due pagine di raccolta dati e riepilogo usando HTML/PHP e opzionalmente rendere usabile e gradevole il sito con CSS e JS. L’alunno faccia tutte le ipotesi tecnologiche aggiuntive che ritiene necessarie.

L’esercizio è un classico esempio di utilizzo delle tecnologie del PHP, piuttosto comune sia durante l’anno scolastico come prova intermedia, sia come porzione di una prova concorsuale o di esame di stato. Vediamo come realizzare una soluzione semplice ma efficace.

Database

Creiamo prima di tutto il nostro db. In questo frangente non facciamo molte congettura sulla parte di progettazione e modellazione concettuale e logica per brevità di tempo e ci concentriamo più sulla parte tecnico/pratica. Nel nostro caso ci occorrono due tabelle: una che contenga i dati delle scuole per caricare la tendina e una tabella per registrare i dati di temperatura rilevata in una delle scuole scelte. Ovviamente le due tabelle scuola e temperatura devono avere una relazione 1:N con chiave esterna opportuna. Riportiamo il codice estratto dal dump del database. E’ una struttura tabellare di esempio, non ha pretesa di completezza.

CREATE TABLE `scuole` (
  `id` int NOT NULL,
  `nome` varchar(60) NOT NULL,
  `codice` varchar(10) NOT NULL,
  `descrizione` varchar(60) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `scuole` (`id`, `nome`, `codice`, `descrizione`) VALUES
(1, 'ITT Alessandrini', 'TEIS00900D', ''),
(2, 'IP Marino', 'TEIS00900D', ''),
(3, 'Istituto G. Milli', 'TEPM010004', '');

CREATE TABLE `temperatura` (
  `id` int NOT NULL,
  `nome` varchar(60) NOT NULL,
  `cognome` varchar(60) NOT NULL,
  `cf` varchar(16) NOT NULL,
  `temperatura` float NOT NULL,
  `datamisurazione` datetime NOT NULL,
  `id_scuola` int NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `scuole`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `temperatura`
  ADD PRIMARY KEY (`id`),
  ADD KEY `id_scuola` (`id_scuola`);

ALTER TABLE `scuole`
  MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

ALTER TABLE `temperatura`
  MODIFY `id` int NOT NULL AUTO_INCREMENT;

ALTER TABLE `temperatura`
  ADD CONSTRAINT `temperatura_ibfk_1` FOREIGN KEY (`id_scuola`) REFERENCES `scuole` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
COMMIT;

Pagina form

Con la struttura del db pronta, possiamo finalmente passare ai nostri script php. La prima pagina ha una form molto semplice con l’aggiunta, forse più complessa, di caricare una tendina direttamente con i dati del database. Da qui la necessità di avere uno script php col codice opportuno per interrogare la tabella Scuole e creare una struttura dinamica della select con le option costruite dal php e un semplice ciclo che scorre i risultati della query. Il resto del codice è molto arbitrario dal punto di vista grafico. Qui ho deciso di usare una struttura tabellare per avere una disposizione di etichette e campi di immissione più gradevole. Se è tranquillamente usabili la classica struttura con i tag table tr td, qui ho fatto un passo in avanti usando le tabelle in puro css. Il resto del css è solo caratterizzato da qualche scelta stilistica esemplificativa, ovviamente del tutto modificabile dall’utente. Il file incluso db.config.php contiene le variabili da passare alla connessione mysqli con i valori opportuni

index.php

<?php include "db.config.php" ?>
<!DOCTYPE html>
<html lang="it">
<head>
	<meta charset="utf-8">
	<title>Inserimento temperatura</title>
	<link href="css/table.css" type="text/css" rel="stylesheet"> 
</head>
<body>

<form action="insert.php" method="post">
	<fieldset>
	<legend>Inserisci rilevazione</legend>	
	<div class="divTable" >
	<div class="divTableBody">
	<div class="divTableRow">
	<div class="divTableCell"><label for="scuola">Scuola: </label></div>
	<div class="divTableCell"><select name="scuola">
			<option value=''>-> Seleziona</option>";
		<?php
		$connessione = mysqli_connect($host,$user,$pass,$db);
		$query = "select * from scuole";
		$res = mysqli_query($connessione,$query);
		while ($row = mysqli_fetch_assoc($res))
		{
			$scuola = $row['nome'];
			echo "<option value='$scuola'>$scuola</option>";
		}
		mysqli_close($connessione);
		?>
	  	</select>
	</div>
	</div>
	<div class="divTableRow">
	<div class="divTableCell"><label for="temp">Temperatura misurata: </label></div>
	<div class="divTableCell"><input type="number" maxlength ="4"size="4" name="temp"/></div>
	</div>
	<div class="divTableRow">
	<div class="divTableCell"><label for="temp">Codice Fiscale: </label></div>
	<div class="divTableCell"><input type="text" maxlength="16" size="16" name="cf"/></div>
	</div>
	<div class="divTableRow">
	<div class="divTableCell"><label for="temp">&nbsp;</div>
	<div class="divTableCell"><input type="submit" value="Invia" /></div>
	</div>
	</div>
	</div>
	</fieldset>
</form>
<body>
</body>
</html>

e a seguire il foglio di stile table.css

.divTable{
	display: table;
	width: 50%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	display: table-cell;
	padding: 3px 10px;
	width: 20%;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

input[type=submit]{
	background-color: #007fff;
  	border: none;
  	color: white;
	margin: 4px 2px;
}

fieldset{width: 50%; border: 1px solid #007fff;}

body{ font-family: arial, verdana, sans-serif;}
label{font-weight: 500;}

Pagina inserimento

Possiamo passare alla seconda pagina ed analizzare le richieste. Sicuramente è una pagina di ricapitolazione che viene chiamata dalla form, e si occuperà per tanto di gestire i dati provenienti. Esercizio piuttosto classico a cui abbiamo una piccola difficoltà: gestire un timestamp un datetime per il salvataggio del record. Scegliamo il secondo, più semplice. Arricchiamo l’esercizio con una serie di controlli sulla validità dei campi. Infatti nel precedente script, non abbiamo fatto considerazioni sui dati inseriti. Solitamente è bene controllare i dati sia lato client con javascript (bypassabile da hacker anche alle prime armi) per impedire l’invio di dati sbagliati, sia lato server col php dove non è possibile che un malintenzionato si infiltri per inserire dati non idonei.

L'articolo Esercizio PHP: misurazione temperatura con tendine dinamiche, immissione da form, sessioni proviene da alfredocentinaro.it.

Come funziona

Soluzione 0

Prendo una immagine con il testo e la immergo come tutte le altre all’interno di una pagina HTML. con il classico tag img. Posso metterne più di una? No, l’html non contiene elementi dinamici di programmazione. Quindi è un fallimento: al secondo tentativo posso forzare il captcha.

Soluzione 1

Uso Javascript o JQuery per randomizzare l’immagine. Ottimo, ci danno una chance in più, ma sono linguaggi lato client. Un attaccante può sempre scoprire come funzionano semplicemente scaricando il codice e con la console del browser ingannare la pagina in men che non si dica. Occorre agire lato server, dove l’attaccante non può vedere il codice sorgente ma solo subirne il risultato sotto forma di pagina html. Il JavaScript è utile per fare alcuni controlli lato client, fare un po’ di grafica, ma la sicurezza, lo abbiamo visto con le sql injection, la possiamo gestire solo lato server.

Soluzione 2

L’idea è quella di avere centinaia di immagini salvate sul disco del server web. Ogni immagine contiene un testo alfanumerico. Se ne prende una a caso, si da in pasto al browser del client e se ne chiede la validazione dall’utente riempendo un form che preleviamo e controlliamo col PHP. Un po’ farraginoso ma fattibile. Inconveniente? Dover aver salvate sul server centinaia di immagini con spreco di spazio e dover gestire comunque una tabella sul db o un vettore nel codice che associa al titolo dell’immagine un relativo codice da verificare. Non possiamo usare il nome direttamente, l’utente ci aggirerebbe in un lampo! E allora perché non le facciamo generare al php lato server l’immagine che ci serve? Magari generando una sequenza di caratteri prima, creando l’immagine con tali caratteri e spedirla quindi al client. Poche cose da fare ma tanta robustezza e praticamente un quantitativo di captcha infinito a costo di spazio ed elaborazione zero. Vediamo come si fa!   Assicuriamoci che però sul server dove testiamo il codice siano installate le librerie grafiche GD. Se state testando tutto su linux, per installarle basta il comando:

 sudo apt-get install php7.3-gd

 o 

 sudo apt-get install php-gd

che vi suggerirà il pacchetto corretto in base alla vostra versione di PHP. Se state usando un ambiente simulato tipo XAMP o WAMP, scaricate il file DLL php_gd2.dll da https://libgd.github.io/ ed inseritelo nella cartella estensioni per poi aggiungere o togliere i commenti sulla riga nel file php.ini

extension=php_gd2.dll
 

Il primo script è molto semplice ma contiene una anomalia a cui non siamo abituati. Creiamo una pagina html con il seguente codice. Io la chiamo banalmente captcha.html

<!DOCTYPE html>
<html lang="it">
<head>
	<title>Un esempio di CAPTCHA</title>
</head>
<body>
<h1>Immagini generate da PHP</h1>
<p>Rispondi al captcha inserendo la scritta nel campo</p>
<img src="captcha.php" alt="risolvi il captcha" />
<form name="captchaform" action="validatecaptcha.php" method="post">
<input type="text" name="captcha" id="captcha">
<input type="submit" value="Invia">
</form>
</body>
</html>

La anomalia che dicevamo è subito evidente: dove dovrebbe comparire l’indirizzo e il nome del file dell’immagine abbiamo adesso il link ad uno script php! Possiamo però intuire che questo script abbia la funzione di creare l’immagine e restituirla al rispettivo tag img che lo graficherà.

Vediamo allora cosa c’è nel nostro script captcha.php.

<?php
session_start();

//creiamo un riquadro per la nostra immagine
 $immagine = imagecreatetruecolor(110, 50);

//scelgo un colore per il testo con i tre valori r g b (violetto qui)
$coloretesto = imagecolorallocate($immagine, 233, 14, 91);

//scrivo un numero casuale
$numerorandom = rand();

//salviamoci in una sessione il numero scelto così da poterlo verificare dopo
$_SESSION['numerorandom'] = $numerorandom;
//echo $_SESSION['numerorandom'];

//8 è il font, gli altri due parametri sono la x e la y da cui parte il disegno
imagestring($immagine, 8, 7, 5,  $numerorandom, $coloretesto);

//restituisco la tipologia immagine come risorsa
 header("Content-Type: image/png");
 imagepng($immagine);

?>

 Se lo script vi da errore, probabilmente sul vostro server Apache/Wampp non è installata la libreria php_gd.dll o analago in linux come spiegato ad inizio articolo. Conviene contattare il sistemista del server o provvedere da voi sulla vostra piattaforma nel file php.ini

Ci manca da vedere il file che controlla il valore immesso dall’utente e quello che abbiamo salvato in sessione. Un semplice esercizio di stile direi. Saltiamo deliberatamente un po’ di controlli per semplificare lo script validatecaptcha.php

<?php
session_start();

if (isset($_SESSION["numerorandom"]))
{
  if ($_SESSION["numerorandom"] == $_POST['captcha'])
    echo "OK, captcha valido";
  else
    echo "Captcha non valido! Torna indietro e ritenta";
}
else
  echo "qualcosa è andato storto, contatta il webmaster"
  
?>

 Se tutto va bene, abbiamo il nostro test captcha. Ovviamente è tutto migliorabile, ma per cominciare un semplice test è più che sufficiente. Considera che sistemi di captcha ormai sono ampiamente studiati e resi complessi per ogni necessità. Si possono trovare online diverse varianti al nostro esempio puramente didattico.

L'articolo Captcha e Immagini generate da PHP proviene da alfredocentinaro.it.