php

Esercizio PHP: misurazione temperatura con tendine dinamiche, immissione da form, sessioni

di

Si vuole realizzare un servizio Web per la raccolta dei dati relativi alle temperature misurate agli utenti in ingresso presso le scuole della città. Il servizio prevede le seguenti pagine:

  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 di caricare una tendina direttamente da 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.

Ultima modifica 27 Gennaio 2022

Visite: 230