HTML

5. Leggere i form HTML

Leggere i form HTML

Vediamo di seguito alcuni metodi che ci consentiranno di leggere rapidamente tutti i dati contenuti in una form, e di aggiungerli all'array params, pronti per essere processati e inviati nella prossima richiesta AJAX.
Il metodo principale (e l'unico che richiameremo) è form_read.
Quest'ultimo si servirà di altri due metodi esterni solo nel caso in cui, nella form HTML che dovrà leggere, ci sarà una select multipla.

Il primo metodo d'appoggio è getSelected, che legge i valori selezionati nella select multipla e restituisce un'array contenente i suddetti valori.
Il secondo metodo d'appoggio è storeSelected, che prenderà l'array elaborato da getSelected e lo memorizzerà in params pronto per la spedizione.

AjaxModule.prototype.getSelected = function(opt)
{
	var selected = new Array();
	var index = 0;

	for (var intLoop = 0; intLoop < opt.length; intLoop++)
	{
		if ((opt[intLoop].selected) || (opt[intLoop].checked))
		{
			index = selected.length;
			selected[index] = new Object;
			selected[index].value = opt[intLoop].value;
			selected[index].index = intLoop;
		}
	}

	return selected;
}

AjaxModule.prototype.storeSelected = function(opt, p)
{
	var sel = AjaxModule.prototype.getSelected(opt);
	var strSel = "";

	var cont = 0;
	for (var item in sel)
	{
		cont++;
		AjaxModule.prototype.params[p + "_" + cont] = sel[item].value;
	}
	AjaxModule.prototype.params["n_" + p] = cont;
}

AjaxModule.prototype.form_read = function(nome_form)
{
	var oForm = document.getElementById(nome_form);

	for (var i = 0; i < oForm.elements.length; i++)
	{
		var oField = oForm.elements[i];

		switch (oField.type)
		{
			case "checkbox" :
			case "radio" :
				if (oField.checked)
					AjaxModule.prototype.params[oField.id] = "1";
				else AjaxModule.prototype.params[oField.id] = "0";
				break;

			case "text" :
			case "hidden" :
			case "password" :
			case "textarea" :
			case "select-one" :
				AjaxModule.prototype.params[oField.id] = oField.value;
				break;

			case "select-multiple" :
				AjaxModule.prototype.storeSelected(oField.options, oField.id);
				break;
		}
	}
}

Per utilizzare questa nuova funzionalità è sufficiente assegnare un ID alla form che dobbiamo leggere ed utilizzare il seguente codice per estrapolarne i dati.

<script type="text/javascript" language="JavaScript">
	imp.form_read('nome_form');
</script>

Una volta chiamato form_read, tutti i valori contenuti nel form HTML saranno pronti e disponibili in params e non dovrete fare altro che effettuare la richiesta al server attraverso il metodo makeRequest.

Il codice di esempio, e il codice della classe AjaxModule, li trovate in allegato a questo post.

E con questo abbiamo concluso il nostro tutorial.
Buon AJAX a tutti!

4. Esempio pratico

Esempio pratico

Arrivati a questo punto del tutorial, la libreria AjaxModule è completa e pronta per essere utilizzata.
Vediamo quindi un esempio pratico che vi sia utile per ricreare rapidamente un ambiente semplice, usabile e funzionale.

Nel nostro esempio interrogheremo uno script PHP che ci restituirà la lista degli ultimi impiegati, aspettandosi come parametro num_impiegati che utilizzerà per limitare la lista.
Passandogli quindi 0 (ZERO) come valore per num_impiegati, lo script ci restituirà una lista vuota, mentre se gli passeremo 3 (TRE) lo script restituirà la lista degli ultimi tre impiegati inseriti (se ci sono).

Non vedremo qui il codice PHP, ma sarà scaricabile a fine tutorial così potrete analizzarne il codice di esempio. Vediamo il codice JavaScript che eredita da AjaxModule per sfruttarne le funzionalità.

Impiegati.js

function Impiegati()
{
	this.setTargets = function(target_div)
	{
		this.setTarget(document.getElementById(target_div));
		this.setErrorTarget(document.getElementById(target_div));
		this.setLoadingTarget(document.getElementById(target_div));
	}

	this.carica = function()
	{
		this.setTargets('target');
		this.params['num_impiegati'] = document.getElementById('num_impiegati').value;
		this.makeRequest('script/impiegati.php');
	}
}

Impiegati.prototype = new AjaxModule();
Impiegati.prototype.constructor = Impiegati;

Il metodo setTargets non fa altro che impostare lo stesso target per la barra di caricamento, la risposta del server e gli errori di connessione.
Il metodo carica richiama setTargets, poi legge il numero di impiegati da un campo input nella pagina memorizzandolo nell'array params.
A questo punto utilizza makeRequest specificando il percorso della pagina PHP da interrogare.

Il metodo makeRequest apre automaticamente la connessione e invia i parametri trovati in params.
Ora vediamo la pagina HTML che includerà ed utilizzerà lo script "Impiegati" che ci consentirà di creare un'istanza della suddetta classe.
Attraverso l'istanza potremo effettuare la chiamata vera e propria al server per leggere la famigerata lista degli ultimi impiegati.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Ajax Module</title>

		<script type="text/javascript" language="JavaScript" src="script/AjaxModule.js"></script>

		<script type="text/javascript" language="JavaScript" src="script/Impiegati.js"></script>
		<script type="text/javascript" language="JavaScript">

			// <!--
			var imp = new Impiegati();
			// -->
		</script>
	</head>
	<body>
		<a href="javascript:;" onclick="imp.carica();">Carica lista impiegati</a>

		<br />
		Numero massimo di ultimi impiegati da visualizzare:
		<input type="text" id="num_impiegati" name="num_impiegati" value="2" />

		<br />
		<div id="target" name="target"></div>
	</body>
</html>

Abbiate cura di includere i fogli JavaScript nell'ordine giusto per non generare incompatibilità con qualche browser.

Il tutorial non è ancora finito. Nel prossimo caiptolo vedremo alcuni strumenti utili per la lettura veloce di form HTML.

Ajax Script

Introduzione

In questo tutorial costruiremo assieme uno script AJAX che ci consentirà di interrogare in modo semplice e veloce degli script lato server (o semplici pagine HTML).
Si tratta di uno script AJAX pronto ed efficace, che attraverso il concetto di ereditarietà, vi darà la possibilità di creare al volo una classe per comunicare con il vostro server.

Nel nostro caso costruiremo una pagina HTML che chiamerà uno script in PHP.
Questo restituirà a sua volta una lista di impiegati leggendola direttamente da un database MySQL.

Il cuore del tutorial consiste principalmente nella costruzione del modulo in JavaScript che dovrà occuparsi dell'invio e della ricezione dei dati.

Consiglio il tutorial a chi è già avvezzo con la programmazione ad oggetti in JavaScript, anche se non lo ritengo un requisito strettamente necessario per una comprensione utile.
Se utilizzate comunque l' ereditarietà in altri linguaggi, allora potrebbe essere il momento opportuno per imparare qualche chicca in JavaScript

Iniziamo con la creazione del foglio JS che ospiterà la nostra classe madre: AjaxModule.

41. I Cookie

I cookie sono un metodo veloce ed efficace per "ricordarsi" di un utente.

Il sistema è molto semplice e permette di memorizzare dei dati nel browser del navigatore. Questi dati vengono scritti in un file che prende il nome di cookie, che sarà possibile creare se il browser dell'utente è configurato per accettarli.

Di norma i cookie sono attivi nella stragrande maggioranza dei browser, e molti siti richiedono che siano obbligatoriamente abilitati per poter usufruire dei servizi da loro offerti.

I cookie si possono impostare con due funzioni che PHP ci fornisce : setcookie() e setrawcookie().

In PHP i cookie fanno parte dell'intestazione HTTP, motivo per cui è necessario chiamare setcookie() prima di mandare qualsiasi dato in output al browser dell'utente.

Se non è possibile evitare degli output prima di settare il cookie, interviene in nostro aiuto la funzione ob_start(), che posticiperà automaticamente gli output dello script, bufferizzandoli finchè non saranno impostati i cookie o l'intestazione.

Una volta impostati i cookie, sarà possibile accedervi attraverso l'array globale $_COOKIE[].

Vediamo ora come è possibile impostare i cookie attraverso la funzione setcookie().

Prototipo della funzione

bool setcookie ( string name [, string value [, int expire [, string path [, string domain [, bool secure [, bool httponly]]]]]] )

Lista dei parametri di setcookie() :

  1. name - Obbligatorio - Definisce un nome per il cookie
  2. value - Facoltativo - Il valore da memorizzare nel cookie
  3. expire - Facoltativo - Il tempo di scadenza del cookie in formato timestamp Unix
  4. path - Facoltativo - La directory del server da cui sarà accessibile il cookie
  5. domain - Facoltativo - Il dominio web da cui sarà accessibile il cookie
  6. secure - Facoltativo - Per impostare il cookie solo su connessioni sicure HTTPS
  7. httponly - Facoltativo - Per rendere accessibile il cookie solo attraverso il protocollo HTTP
    Nota : httponly è disponibile da PHP 5.2.0 e non è supportato da tutti i browser ma è molto utile per ridurre gli attacchi di tipo XSS, impedendo l'accesso al cookie da linguaggi client-side come Javascript

Esempio Cookie

Vedremo ora un semplice esempio in una pagina singola, attraverso cui creeremo e cancelleremo un cookie servendoci di due form HTML separate in modo da poter inviare due comandi differenti.

Stavolta dividerò il codice in due pezzi per poterlo spiegare meglio ai neofiti.

test.php

Vediamo la prima parte della pagina, costituita da solo codice PHP e priva di output in modo da non inviare l'header della pagina prima di aver operato sul cookie.

Non uso volontariamente la funzione ob_start() che ci permette di bufferizzare l'output, per non diminuire inutilmente le prestazioni dello script, anche se in questo caso lo script è talmente leggero che non si noterebbe alcuna differenza, ma vi consiglio comunque di non usare mai ob_start() inutilmente.

<?php

	function cancellaCookie($nomeCookie)
	{
		unset($_COOKIE[$nomeCookie]);
		setcookie($nomeCookie, "", time() - 86400); // Imposta la scadenza al giorno prima
	}

	if ($_POST["comando"] == "cancella")
	{
		cancellaCookie("dato");
	}
	else if ($_POST["comando"] == "imposta")
	{
		$scadenza = (int) $_POST["expire"] + time();
		setcookie("dato", $_POST["dato"], $scadenza, "/test/");

		/* Scriviamo direttamente nell'array globale per non far fallire la prossima IF
		rendendo così il cookie disponibile da subito senza ricaricare la pagina */
		$_COOKIE["dato"] = $_POST["dato"];
	}

?>

In questa prima parte di codice ho creato la funzione cancellaCookie(), che per cancellare i cookie ne imposta la data di scadenza al giorno prima. Prima di chiamare setcookie() però effettua una chiamata ad unset().

Questo per evitare che si tenti di accedere al cookie cancellato prima che la pagina venga ricaricata.

I browser infatti cancellano il cookie (file) dall'hard disk se verificano che il cookie è effettivamente scaduto, ma appena cancellato rimane comunque disponibile nell'array globale $_COOKIE[] fino ad un nuovo caricamento pagina che forzerà l'aggiornamento dell'array.

Dopo la definizione della funzione cancellaCookie() troviamo un blocco IF - ELSE IF dove agiamo di conseguenza al comando inviato da una delle due form HTML che vedremo nel secondo pezzo della pagina.

Nella else if assegniamo la data di scadenza del cookie, sommando al valore $_POST["expire"] inviatoci da una form, la timestamp corrente restituita da time().


Infine ho richiamato setcookie() impostando "/test/" come path valida per il cookie, poichè la mia pagina test.php si trova al momento sotto il seguente URL : http://localhost/test/test.php.

Vediamo il secondo pezzo di test.php

<?php /* Incollate qui il primo pezzo di test.php per fare le prove */ ?>
<html>
	<head>
		<title>Impostiamo e cancelliamo i Cookie</title>
	</head>
	<body>


		<?php

			if (isset($_COOKIE["dato"]))
			{
				echo "Cookie impostato per ricordare il seguente dato = \"" . $_COOKIE["dato"] . "\"";

				?>

				<br /><br />

				<form name="deletecookie" action="test.php" method="post">
					<input type="hidden" name="comando" value="cancella" />

					<input type="submit" value="Cancella cookie" />
				</form>

				<?php
			}
			else
			{
				?>

				<form name="writecookie" action="test.php" method="post">
					<table width="400" border="0" cellspacing="5" cellpadding="5">

						<tr>
							<td>Dato da memorizzare</td>
							<td><input type="text" name="dato" value="" /></td>

						</tr>
						<tr>
							<td>Scadenza del cookie</td>
							<td><input type="text" name="expire" value="" /></td>

						</tr>
						<tr>
							<td><input type="submit" value="Imposta cookie" /></td>

							<td> </td>
						</tr>
					</table>
					<input type="hidden" name="comando" value="imposta" />

				</form>

				<?php
			}
		
		?>

	</body>
</html>

Questo secondo pezzo di codice è un misto di PHP e HTML, diviso sostanzialmente in due blocchi principali, una IF e la sua corrispondente ELSE.

Con la IF controllo se il cookie è impostato mediante un controllo con isset() sull'array globale $_COOKIE[], motivo per cui nel primo pezzo di codice settiamo il cookie sia manualmente che con la funzione setcookie().

Se il cookie è impostato viene stampato il suo valore e di seguito una form HTML per eliminarlo dal browser del client, che invierà una sola variabile di nome comando (name="comando") e impostata al valore "cancella" (value="cancella").

Questa variabile la controlliamo nel primo pezzo di codice attraverso la prima IF : if ($_POST["comando"] == "cancella")

Nell'ultima else abbiamo un'altra form HTML (writecookie) che ci servirà per impostare il cookie.

La form writecookie invia 3 valori :

  1. dato - Il valore da memorizzare nel cookie
  2. expire - La durata del cookie espressa in secondi
  3. comando - Assegnato a "imposta" per indicare allo script che deve impostare il cookie

La prima volta che si esegue la pagina test.php e tutte le volte in cui il cookie non è impostato o scaduto, si ottiene questo output sul browser.

Una volta impostato il cookie, riaprendo la pagina (non aggiornate con F5 o reinvierete i dati per POST) otterrete invece questo output.

Se poi state usando Firefox, che consiglio vivamente soprattutto se create siti in quanto ha una miriade di strumenti utili per noi sviluppatori, allora potete andare su "Strumenti" -> "Opzioni..." -> "Privacy" -> "Mostra i cookie..." e cercare il cookie appena impostato cercando per nome cookie o per dominio.

Una schermata del gestore cookie di Firefox con la lettura del cookie impostato nell'esempio soprastante.

Inoltre ricordatevi sempre di non memorizzare dati sensibili nei cookie, e se mettete delle password create un algoritmo di criptazione o appoggiatevi ad un algoritmo di terze parti che faccia un buon lavoro.

Aggiungo infine che se un browser rispetta gli standard dei cookie, non sarà possibile creare dei cookie più grandi di 4KB per un massimo di 20 cookie per dominio, e il browser dell'utente non accetterà inoltre dei cookie se ne ha già un totale di 200.

Per ovviare a questi problemi ci serviremo delle "Sessioni" che vedremo nei prossimi capitoli.

Nota : nella sezione Download potete trovare altre estensioni utili di Firefox per sviluppare applicazioni web.
Le consiglio tutte ma in particolare provate Firebug e Web Developer ... è tutto aggratis eh!

40. Inviare dati coi metodi GET e POST

Come ogni linguaggio server-side che si rispetti, anche PHP ci consente lo scambio di dati fra pagine con i metodi classici che HTML ci mette a disposizione : GET e POST.

Con entrambi i metodi l'invio dei dati avviene tramite un normale form HTML, e PHP ci consente di prelevarli attraverso i due array globali $_GET[] e $_POST[].

Al form HTML sono necessari due paramentri principali : action e method.

A seconda del DOCTYPE che utilizzate nella vostra pagina e dagli scopi del vostro script potrebbero servire anche i parametri id e name (enctype, target ...) che io ormai specifico sempre perchè abituato ad usare il DOCTYPE XHTML 1.0 che richiede fra l'altro che i valori dei parametri siano racchiusi fra doppi apici, ma non è scopo di questa guida che illustrerà solo il funzionamento della parte PHP, vi consiglio pertanto lo studio delle ultime versioni di HTML e XHTML prima di cominciare a sviluppare delle applicazioni a livello commerciale.

Tornando al nostro form HTML vediamo a cosa corrispondono i parametri action e method :

  • action - Indica la pagina a cui inviare i dati. Se lasciato vuoto punterà di default alla pagina stessa.
  • method - Indica il metodo in cui avviene lo scambio di dati : "get" o "post".

L'attributo "name" degli elementi "input" usati all'interno del form HTML è molto importante, poichè rappresenta la chiave che useremo per accedere all'array globale $_GET[] e che ci consentirà di leggere il valore del dato inviato.


Esempio invio di dati

Iniziamo con un esempio semplice composto da due pagine : una in HTML che invia i dati e una in PHP che li riceve.

inviodati.html

<html>
	<head>

		<title>Pagina HTML per l'invio dei dati</title>
	</head>
	<body>
		<form action="ricezionedati.php" method="get">

			<input type="text" name="miotesto" />
			<input type="submit" value="Invia dati" />

		</form>
	</body>
</html>

Osserviamo i due attributi del form, action assegnato a "ricezionedati.php", che sarà la pagina incaricata di ricevere i dati inviati, e method assegnato a get, per specificare che stiamo usando appunto il metodo di invio dati GET.

Infine notiamo i due elementi "input" del form, uno di tipo text (campo di testo) e uno di tipo submit (bottone per inviare i dati).
L'attributo name del campo di testo è settato al valore "miotesto", ossia la stringa che useremo per accedere al valore del campo di testo dalla pagina PHP.

ricezionedati.php

<html>
	<head>
		<title>Pagina PHP per la ricezione dei dati</title>
	</head>

	<body>
		<?php

			if (strlen($_GET["miotesto"]))
				echo "Mi hai inviato la stringa \"" . $_GET["miotesto"] . "\"";
			else
				echo "Non mi hai inviato nulla!!";

		?>

	</body>
</html>

Niente di più semplice, usiamo il nome dell'attributo name per accedere all'array globale $_GET[] e il gioco è fatto.

Con la funzione strlen() effettuo un semplice controllo per vedere se è stato inviato almeno un carattere.

Una volta inviati i dati e caricata la pagina ricezionedati.php, potrete notare nella barra degli indirizzi del vostro browser che i dati inviati sono in chiaro e perfettamente leggibili dall'utente finale :

http://localhost/test/ricezionedati.php?miotesto=testo+da+inviare

Il metodo GET infatti, consiste semplicemente nell'accodare all'URL della pagina un punto interrogativo a cui seguiranno tutte le variabili inviate con la sintassi variabile=valore, separate da una E commerciale & :

pagina.php?variabile1=valore&variabile2=valore&variabile3=altro+valore

Il metodo POST è equivalente al GET con la differenza che POST quando invia i dati non li mette in chiaro nell'URL.

Un metodo è migliore di un altro a seconda del caso ma mai a prescindere.
Come forse avrete notato, in questo stesso sito vengono usati entrambi i metodi.

Ho usato POST per inviare dati sensibili preservando un minimo di sicurezza, mentre ho usato GET per far sapere a guide.php quale pagina deve caricare, mettendo in chiaro il titolo della pagina nell'URL, favorendo il posizionamento sui motori di ricerca per quelle determinate parole chiave (Web Marketing).

Scrivendo applicazioni e creando siti vi ritroverete senzaltro in situazioni in cui preferirete POST e altre in cui è preferibile GET.


Esempio invio dati su pagina singola

Vedremo ora un ultimo esempio in cui inviamo e riceviamo i dati nella stessa pagina, stavolta col metodo POST.

invio_ricezione.php

<html>
	<head>

		<title>Invio e ricezione in unica pagina</title>
	</head>
	<body>
		<?php

			if (strlen($_POST["miotesto"]))
			{
				echo "Dato inviato = " . $_POST["miotesto"];
			}
			else
			{
				?>

					<form action="" method="post">
						<input type="text" name="miotesto" />
						<input type="submit" value="Invia dato" />

					</form>

				<?php
			}

		?>
	</body>
</html>

Per inviare e ricevere i dati nella stessa pagina, avrei potuto specificare quest'ultima nell'attributo action, ottenendo il medesimo risultato ma garantendo una maggiore compatibilità coi vecchi browser (vi consiglio se possibile di specificarlo sempre).

Tornando ai metodi GET e POST, abbiate cura di usare sempre l'array globale corretto a seconda del metodo che avete scelto.

E' possibile inoltre accedere ai dati inviati come se fossero delle variabili, indipendentemente dal metodo di invio dati utilizzato, ma è necessario avere la direttiva register_globals impostata a ON nei settaggi di PHP.
Per maggiori informazioni vi rimando alla Documentazione ufficiale.

Nota : solitamente l'estensione delle pagine contenenti PHP dovrà essere ".php" o lo script verrà interpretato come semplice testo (dipende dalla configurazione del server).

39. Codice PHP nelle pagine HTML

In questo capitolo vedremo come è possibile inserire del codice PHP in mezzo a del codice HTML.

Abbiamo già visto come fare il contrario, semplicemente stampando i tag HTML come una stringa direttamente con echo, avendo cura di utilizzare gli appropriati caratteri di escape per, ad esempio, il doppio apice ".

Per inserire del codice PHP è sufficiente racchiuderlo fra questi due tag :

  • Tag di apertura : <?php
  • Tag di chiusura : ?>
<html>
	<head>
		<title>Codice PHP nelle pagine HTML</title>

	</head>
	<body>
		<?php echo "Ciao da PHP"; ?>
	</body>
</html>

PHP ci mette a disposizione altri due tipi di tag, disponibili se nel file di configurazione del vostro server (php.ini) la variabile short_open_tag è settata a "On".

In questo modo abbiamo a disposizione la variante più corta del tag descritto precedentemente, che omette php dopo il punto interrogativo :

<html>

	<head>
		<title>Codice PHP nelle pagine HTML</title>
	</head>
	<body>
		<? echo "Ciao da PHP"; ?>

	</body>
</html>

Abbiamo infine a disposizione un'ultima variante di Short Tag, che manda direttamente in output il contenuto senza bisogno dei costrutti echo o print. Per utilizzarlo è sufficiente aggiungere il simbolo = dopo il punto interrogativo :

<?php

	$href = "http://www.realizzazione-sito.info/";
	$title = "Guide e Tutorial gratuiti";
	$target = "_blank";

?>
<html>
	<head>
		<title>Codice PHP nelle pagine HTML</title>

	</head>
	<body>
		<a href="<?=$href?>" title="<?=$title?>" target="<?=$target?>">Realizzazione Sito . info</a>

	</body>
</html>

Nota : se nel file php.ini avete attivo asp_tags potete usare i tag in stile ASP <% %>
Se non avete modo di accedere al file php.ini, il modo più veloce per verificare la disponibilità di questi tag, è ovviamente creare una pagina di prova che li utilizza per verificarne il corretto funzionamento.


Condividi contenuti