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.

Esempio 00

La form passa i dati ad una pagina fittizia register.

 Ed ecco il codice che implementa l’immagine sopra, così da poter confrontare.

      <h1>Esempio di pagina web con un form</h1>

      <form action="register.php" method="post">

      <fieldset>
        <legend>Dati anagrafici</legend>
        Inserisci qui il tuo nome: <input type="text" name="nome" /><br />
        Inserisci qui il tuo cognome: <input type="text" name="cognome" /><br />

        Sesso: <input type="radio" name="sesso" value="maschio" />maschio
        <input type="radio" name="sesso" value="femmina" />femmina<br />

        Luogo di nascita: <input type="text" name="luogo" /><br/>
        Data di nascita: <input type="date" name="data" /><br/>
      </fieldset> 

      <fieldset>
        <legend>Password personale</legend>
        Inserisci la password <input type="password" name="password" /><br />
      </fieldset> 

      <fieldset>
        <legend>Dati personali</legend>
        Patente <input type="checkbox" name="auto" />auto 
        <input type="checkbox" name="moto" />moto 
        <input type="checkbox" name="motorino" />moto 50cc<br />

        Classe <select name="classe">
          <option value="xx">Seleziona la classe</option>
          <option value="3ai">Classe 3AI</option>
          <option value="3bi">Classe 3BI</option>
          <option value="3ci">Classe 3CI</option>

        </select><br />

        <textarea name="commento" cols="40" rows="20">Inserisci qui i tuoi commenti</textarea><br />
      </fieldset> 

      <input type="button" value="Saluta" onClick="alert('Ciao!');" />
      <input type="submit" value="Invia" />
      <input type="reset" value="Cancella" />
    </form>

Esempio 01

Altro esempio, molto semplice da realizzare in una manciata di minuti. La form passa i dati ad una pagina fittizia stat.php. Aggiungi però un campo nascosto che passa il valore 2.

Ed ecco il codice corrispondete proposto

<form  action="stat.php" method="post">
<fieldset>
<legend>Dati utente</legend>
<input type="hidden" name="controllo" value="2"><br>
Nome <input type="text" name="nome" value="il tuo nome" size="15" maxlength="20"><br>
Cognome <input type="text" name="cognome" value="il tuo cognome" size="15" maxlength="20"><br>
Sesso: <input name="sesso" type="radio" value="1">M
<input name="sesso" type="radio" value="2">F
<input type="reset" value="cancella"><input type="submit" value="invia dati"><br>
</fieldset>
</form>

Esempio 02

 Altro esempio. Questa volta fai puntare la tua form alla pagina registrati.php e aggiungi un campo nascosto con nome controllo e valore 2

Ed ecco il codice per contro-verificare.

<form action="registrati.php" method="post">
<fieldset>
<legend>Condizioni del servizio:</legend>
Per aderire al servizio devi inserire un user, una password ed accettare le condizioni.<br>
<input type="hidden" name="controllo" value="2"><br>
User <input type="text" name="user" value="" size="15" maxlength="20"><br>
Password <input type="password" name="password" size="15" maxlength="20"><br>
Conferma <input type="password" name="passwordb" size="15" maxlength="20"><br>
Condizioni:<br>
<textarea readonly rows="5" cols="30"><br>
Il webmaster gestore del sito declina ogni ecc....<br>
</textarea><br>
<input name="ceck" type="checkbox"> Ho letto ed accetto le condizioni.<br>
<input type="submit" value="aderisci">
</fieldset>
</form>

 Esempio 03

Un esempio più articolato e completo con tutti o quasi gli elementi delle form. Le label sono inserite in alto, pratica molto diffusa tra gli stili in voga recentemente.

Il codice corrispondente per verificare l’esercizio

<!DOCTYPE html>
<html lang="it">
<head>
	<title>Registrazione</title>
	<meta charset="UTF-8">
</head>
<body>

<h1>Benvenuti nella pagina di registrazione</h1>

<form>
	<fieldset>
		<legend>Modulo di registrazione</legend>
		<p>Inserendo i tuoi dati nel modulo sottostante potrai usufruire di servizi eccezionali.
                 Cosa aspetti? (Se incontri difficoltà contattaci ad <a href="mailto:info@tizioincognito.it">info@tizioincognito.it</a>)</p>
	

			<label for="nomealunno">Nome:</label><br />
			<input type="text" name="nomealunno" id="nomealunno" required size=20><br />
			<br />
			<label for="cognomealunno">Cognome:</label><br />
			<input type="text" name="cognomealunno" id="cognomealunno" required size=20><br />
			<br />
			<label for="sesso">Sesso:</label><br />
			<input type="radio" name="sesso" id="sesso" value="m">M
			<input type="radio" name="sesso" value="f">F
			<br />
			<br />
			Hai conosciuto questo servizione come:<br />
			<input type="checkbox" id="informatica" name="informatica">Internet<br />
			<input type="checkbox" id="calcio" name="calcio">Giornali<br />
			<input type="checkbox" id="scommesse" name="scommesse">Amici<br />
			<br />
			<select name="tempistiche">  
				<option value="Frequenza">-Fequenza-</option>
				<option value="Giorno">Giorno</option>
				<option value="Settimana">Settimana</option>
				<option value="Mese">Mese</option>
			</select><br /><br />

			<label for="commenti">Eventuali commenti:</label><br />
			<textarea id="commenti" name="commenti"></textarea>

			<br /><br />
			<input type="submit" value="Invia">
			<input type="reset" value="Cancella">


	</fieldset>
</form>

<div class="center">Crediti: Alfredo Centinaro - Classe VI DI</div>
</body>
</html>

L'articolo Esempi con Form in HTML (semplici) proviene da alfredocentinaro.it.

 In questo esempio vediamo una semplice form, in cui in realtà non ci sono label, ma il contenuto dei singoli campi viene intuitivamente suggerito dai placeholder. L’esempio non vanta elementi grafici particolarmente complessi da intuire per lo studente eccetto che per la scelta di eliminare i bordi dalle caselle di input sia email che password. Pratica questa molto attuale nei widget che troviamo nei siti web più recenti.

Il codice HTML è molto semplice. Non abbiamo compilato per il momento il tag form con tutti i doverosi attributi per concentrarci sulla resa stilistica. Troviamo semplicemente un fieldset senza legenda, tre input per i rispettivi campi. Non essendo etichette/labels, non inseriamo tabelle o altri sistemi particolari di disposizione degli oggetti.

<!DOCTYPE html>
<html lang="it">
<head>
        <title>Form vs CSS</title>
        <meta charset="utf-8" >
        <link href=css/style.css rel="stylesheet" type="text/css">
</head>

<body>

<form>
<fieldset>
<h1>TuaMail.com</h1>
<h3>Accedi</h3>

<input type="email" id=email name=email placeholder="Inserisci la tua mail"><br>
<input type="password" id="password" name="password" placeholder="Inserisci la tua password">
<input type='submit' value='ENTRA' id="invia"> 
</fieldset>
</form>
</body>
</html>

Il CSS ora. Tralasciamo il selettore body che mette al centro della pagina la nostra form, il codice del fieldset e dei testi è semplice e non merita particolari considerazioni per il lettore e l’alunno che si trovano a questo livello di competenza. Abbiamo impostato delle dimensioni in pixel e giocato un po’ sui font. Il bordo è stato sovrascritto con una linea grigia tenue più gradevole di quella nera di default.

fieldset{   
    border: 1px solid #CCCCCC;
    width: 300px;
    padding: 10px 5px 0 15px;
}

h1{
    color:#034a88;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: x-large;
    width: 280px;
    text-align: center;
}

h3{
    font-size: large;
    font-weight: 300;
    width: 280px;
    text-align: center;  
    color: grey;
    font-family: Arial, Helvetica, sans-serif;  
}

 La porzione che gestisce gli input. Abbiamo assegnato ad ogni campo un name, che sappiamo essere comodo per la gestione $_POST/$_GET con PHP ed un ID che è invece fondamentale per CSS, JS e JQuery. La politica che adottiamo è quella di chiamarli uguale ma non è necessariamente una regola. Per prima cosa, usiamo il selettore input per assegnare uno stile a tutti i contenitori: eliminare il bordo, l’ombra interna e impedire il resize.

input {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; 
}

Fatto questo possiamo dare uno stile ai soli campi password e mail. Come blocchi, andranno a capo in automatico. In più aggiungiamo un bordino grigio che quando si clicca dentro la casella per compilare diverrà blu col selettore :focus che assomiglia molti ai a:hover e a:visited più noti ai lettori.

#email, #password{
    display: block;
    border-bottom:2px solid #e8e8e8;
    padding:6px 0 3px 5px;
    width:280px;
    color:#666;
    font-size:15px;
}

#email:focus, #password:focus{
    border-bottom:2px solid #0070d6
}

Infine il bottone che decisamente non assomiglia ai bottoni standard a cui siamo abituati, colorato con i bordi smussati coll’attributo radius ed anche qui l’annullamento del sistema bordo/ombra. L’effetto :hover è semplice ed intuitivo.

#invia{
    background-color:#034a88;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    width:280px;
    height:36px;
    border-radius:3px;
    margin:20px 0 14px 5px;
    -webkit-appearance:none
}

#invia:hover{background:#09f}

L'articolo Form HTML/CSS (intermedio) – Esempio 01 proviene da alfredocentinaro.it.