Il blog di webEngine » Sviluppo Web

Configurare Apache e Php per l’invio di email

admin — Thu, 17 Dec 2009 12:59:58 +0000

Dunque, se siete arrivati su questa pagina, state sicuramente progettando o comunque vi sarà già capitato, di imbattervi nella creazione di uno script di invio email in automatico… Inviare automaticamente email con php è possibile grazie alla funzione nativa mail descritta abbondantemente nella guida ufficiale del php e utilizzata da tutti gli script di più alto livello presenti in rete.

Potrebbe capitarvi che PHP non sia correttamente configurato per l’invio delle email e che quindi tutti i tentativi di eseguire il vostro script correttamente, falliscano miseramente e senza darvi troppe spiegazioni. Questo perchè PHP di default ,non effettua la configurazione del “modulo” sendmail, necessario per l’invio dell’email da PHP.

Eccovi una breve descrizione di come configurare il server web Apache per l’invio di email dagli script php sviluppati localmente, l’approccio di risoluzione è il medesimo sia che ci si trovi in ambienti Windows che Linux/Unix.

Per tutti gli utenti linux/unix effettuare una ricerca del comando sendmail:

luca@lincelnx:~$ locate /sendmail
/home/luca/.ies4linux/ie6/drive_c/windows/system32/sendmail.dll
/usr/lib/sendmail
/usr/sbin/sendmail
/usr/share/gnome-pilot/conduits/sendmail.conduit
/usr/share/man/man8/sendmail.8.gz
/usr/share/perl5/Mail/Mailer/sendmail.pm

Prendiamo come buoni tutti i risultati contenuti nelle cartelle dove risiedono i binari

/usr/sbin o usr/bin (varia da sistema a sistema)

Gli utenti di Microsoft Windows non devono effettuare questo passaggio in quanto l’invio di email avviene grazie alla configurazione integrata di So/Outlook e account utente.

Individuare il file php.ini e aprirlo per modificarne la configurazione.

Per gli utenti Linux/Unix individuare con una ricerca testuale il sendmail_path e settarlo correttamente e in modo esteso es:

; For Unix only. You may supply arguments as well (default: “sendmail -t -i”).
sendmail_path = /usr/sbin/sendmail

Per gli utenti Windows settare il proprio account locale di posta elettronica in modo che php riesca a utilizzarlo per l’invio delle email.

[mail function]
; For Win32 only.
SMTP = localhost
smtp_port = 25

; For Win32 only.
sendmail_from = luca@webeng.it

Salvare il file, riavviare Apache ed effettuare un test del vostro script di invio.

Spero vi sia stato utile.

Box Fluido con Ombra

admin — Tue, 10 Nov 2009 16:19:07 +0000

Ecco un breve esempio di una funzione PHP che ci permette di generare un box fluido in HTML con l’effetto ombreggiatura. La funzione è scritta in PHP ma il codice HTML generato è valido per qualsiasi tipo di linguaggio di programmazione. L’effetto ombra è ottenuto tramite un immagine creata con GIMP.

Le immagini che fanno da angolo sinistro (superiore e inferiore) devono essere opportunamente dimensionate in modo da poter coprire una qualsiasi lunghezza (nel nostro caso fino a un massimo di 2000px) .







";
$box .= "";
$box .= "";
$box .= "".$header."";
$box .=    "";
$box .= $content;
$box .= "";
$box .= "";
$box .= "";
$box .= "";
return $box;
}
?>

Ora veniamo al css.


/* stili per le box */
.box {
width:100%;
margin:1em 0 0em 0;
min-width:5em;
color:#fff;
}

.box .hd .c,
.box .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}

.box .ft .c {
height:14px;
}

.box .hd {
background:transparent url(../images/box_top_left.png) no-repeat 0px 0px;
}

.box .hd .c {
background:transparent url(../images/box_top_right.png) no-repeat right 0px;
}

.box .bd {
background:transparent url(../images/box_left.png) repeat-y 0px 0px;
}

.box .bd .c {
background:transparent url(../images/box_right.png) repeat-y right 0px;
}

.box .bd .c .s {
margin:0px 8px 0px 4px;
background:#8193a7 repeat-x 0px 0px;
padding:1em;
}

.box .ft {
background:transparent url(../images/box_bottom_left.png) no-repeat 0px 0px;
}

.box .ft .c {
background:transparent url(../images/box_bottom_right.png) no-repeat right 0px;
}

/* content-specific */
.box h1 {
/* header */
font-size:1em;
margin:0px;
padding:0px;
margin-top:-1.0em;
}

.box p {
margin:0.5em 0px 0px 0px;
padding:0px;
font-size: 0.9em;
line-height: 1;
}

.box hr {
color: white;
}

L’intero esempio è scaricabile da qui.

Un grazie a Daniele.

Installare Apache, Php, Mysql, PhpMyAdmin per Ubuntu

admin — Tue, 21 Apr 2009 21:55:20 +0000

Eccovi riassunti in questa piccola guida i pochi e semplici passi da effettuare per configurare un ambiente di sviluppo web sulla propria postazione o su un server basato su ubuntu linux. Come potete notare l’installazione risulta molto più immediata che su windows con l’unica differenza che i nostri file di configurazione saranno posizionati diversamente sul filesystem.

Installare Apache2

Aprire una shell bash e digitare il comando:

sudo apt-get install apache2

A questo punto abbiamo installato il server web, per verificare che tutto funzioni correttamente apriamo Firefox e mandiamolo su http://localhost , il risultato visualizzato nel caso l’installazione sia andata a buon fine sarà questo.

Per effettuare personalizzazioni varie alla nostra configurazione di Apache possiamo editare con un semplice blocco note il file apache2.conf contenuto nella directory /ect/apache2 . Le nostre applicazioni web saranno posizionate invece nella directory di default /var/www .

Per controllare il servizio possiamo utilizzare i comandi

sudo /etc/init.d/apache2 restart (per restartare apache ad esempio dopo il caricamento di moduli o cambiamento di file di configurazione)
sudo /etc/init.d/apache2 start (per startare il servizio in caso di avvio manuale)
sudo /etc/init.d/apache2 stop (per stoppare il servizio in caso di necessità)

Installare PHP

Aprire una shell bash e digitare il comando:

sudo apt-get install php5

A questo punto testiamo la capacità di apache di comprendere il php creando una pagina d’esempio, avendo cura prima di restartare apache in modo da poter caricare php con il comando:

sudo /etc/init.d/apache2 restart

Creare una directory con il comando sudo mkdir /var/www/phpinfo
Creare una nuova pagina con il comando sudo gedit /var/www/phpinfo/phpinfo.php
Incollare il testo e salvare
Recarsi su http://localhost/phpinfo/phpinfo.php e verificare la stampa a video dei paramentri di php.

Installare MySql Server

Aprire una shell bash e digitare il comando:

sudo apt-get install mysql-server-5.0

Per controllare il servizio possiamo utilizzare i comandi

sudo /etc/init.d/mysql restart (per restartare apache ad esempio dopo il caricamento di moduli o cambiamento di file di configurazione)
sudo /etc/init.d/mysql start (per startare il servizio in caso di avvio manuale)
sudo /etc/init.d/mysql stop (per stoppare il servizio in caso di necessità)

Installare PhpMyAdmin, MySql Query Browser, MySql Administrator

sudo apt-get install phpmyadmin

Al termine dell’installazione dovreste avere a disposizione la vostra maschera di login su http://localhost/phpmyadmin , nel caso non fosse così aprite una shell e digitate il comando:

sudo ln -s /usr/share/phpmyadmin /var/www/phpmyadmin

questo comando crerà un link simbolico nella cartella di apache che punterà al percorso reale dell’applicazione, infatti può succedere che lo script di installazione non riesca ad effettuare automaticamente questa operazione.

Opzionalmente possiamo installare questi pacchetti molto noti per lo sviluppo di applicazioni lato DB con i seguenti comandi:

sudo apt-get install mysql-query-browser
sudo apt-get install mysql-admin
sudo apt-get install mysql-navigator

Guida ad Ajax : Spaghetti Ajax

admin — Fri, 06 Feb 2009 22:51:58 +0000

AJAX, acronimo di Asynchronous JavaScript and XML, è uno strumento di sviluppo per la realizzazione di applicazioni web interattive (Rich Internet Application).

Questa breve guida ad ad AJAX renderà più facile lo sviluppo di piccole funzionalità che arricchiranno le vostre applicazioni e/o i vostri siti web. La guida è stata rilasciata dall’autore con la licenza creative commons.

Prologo

Quando ho pensato a questo articolo la mia idea fondamentale era quella di mostrare come passare dall’utilizzo di Ajax nudo e crudo, ad una forma più astratta e potente. Mi sono accorto velocemente che un lettore ha bisogno di conoscere alcuni concetti di programmazione funzionale che i designer di Javascript hanno ben pensato di aggiungere al linguaggio per capire appieno come funzionano alcuni pezzi del codice che mostrerò. Come conseguenza l’articolo ha assunto una nuova forma, quella di una guida veloce ma completa ad Ajax, dalle basi alle astrazioni che erano all’origine lo scopo dell’articolo.

Molto del codice esposto viene utilizzato in un servizio di social bookmarking che sto sviluppando in questi mesi (segnalo.com), dunque le tecniche di programmazione mostrate sono reali, nel senso che sono applicabili a progetti in produzione.

Cos’è Ajax

Se leggete in giro su internet forse vi farete l’idea che Ajax è una cosa complicatissima che solo i programmatori più bravi usano. In realtà Ajax è una stupidagine dal punto di vista tecnico, fondamentalmente l’unione di due cose.

La capacità di Javascript di aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente.
La capacità di Javascript di fare richieste tramite il protocollo HTTP.

Molto spesso si parla di Ajax anche quando soltanto una di queste due caratteristiche viene utilizzata, in ogni caso per capirci qualcosa iniziamo esplorando la prima capacità listata sopra: aggiornare le pagine in temo reale tramite Javascript.

Giocare con gli elementi di una pagina




Ciao come stai?

Esempio 1

Ciao come stai?

Provate a guardare il codice dell’esempio 1 e ad utilizzarlo (basta premere il bottone Esegui esempio). Alla pressione del bottone il contenuto dell’elemento DIV che ha come id pluto viene modificato da “Come stai” a “Benone!”. Guardando il codice si capisce subito che farlo è molto semplice, questa è la funzione script1 che viene richiamata alla pressione del pulsante:


function script1() {
var e = document.getElementById("pluto");
e.innerHTML = "Benone!";
}

La funzione script1 chiama la funzione document.getElementById passando come argomento l’identificativo del DIV, e quello che viene ritornato è un riferimento all’oggetto che rappresenta il nostro DIV nella pagina HTML. L’oggetto in questione ha una proprietà chiamata innerHTML che può essere letta/scritta. Se viene letta restituisce il codice HTML presente dentro il DIV, se viene scrittta settandola a qualcosa di diverso come abbiamo fatto noi nell’ultima riga della funzione script1 il contenuto del DIV cambia e gli effetti si vedono immediatamente nella pagina. Facile no?

Javascript illusionista

Altra cosa molto utilizzata in applicazioni Ajax è la possibilità di poter settare due proprietà dello stile CSS di un oggetto chiamate visibility e display in modo da fare scomparire e apparire l’oggetto a piacimento. Bisogna far pratica anche con questo aspetto (altrettanto semplice) prima di scrivere applicazioni Ajax serie. Ecco il secondo esempio che illustra come fare a diventare prestigiatori in Javascript.




Io scompaio e appaio!

Esempio 2

Io scompaio e appaio!

Anche in questo caso l’idea di base non è difficile da capire. Prendiamo il riferimento dell’oggetto con document.getElementById come al solito e modifichiamo lo stile dell’oggetto a nostro piacimento tamite oggetto.style.nomeProprietà per fare quello che vogliamo. Qualcuno di voi che non conosce molto bene i CSS si chiederà come mai modifichiamo sia la proprietà visibility che display. La prima viene settata a visible se si vuole che l’oggetto sia visibile, mentre il valore di hidden la fa scomparire. La seconda invece viene settata a none quando si vuole che l’oggetto non prenda più spazio nella pagina, altrimenti anche se invisibile occuperebbe lo spazio ugualmente. A volte ciò è desiderabile, altre volte non lo è. Si noti come la proprietà dispaly venga settata a block quando si vuole far ricomparire l’oggetto: questo valore è infatti il default per un DIV ma varia al variare dei diversi elementi HTML, ad esempio per altri elementi il valore di default è inline. Se volete saperne di più cercate un buon tutorial sui CSS in giro. Congratulazioni! Sapete la metè delle cose che bisogna sapere per utilizzare Ajax in maniera rudimentale. Dunque andiamo a scoprire l’altra metè della storia.

Richieste HTTP da Javascript

Qual’è la caratteristica principale di una applicazione in Ajax? Il fatto che la pagina si aggiorna senza la necessità di essere ricaricata, o al contrario che un evento generato dall’utente (come ad esempio la pressione di un tasto) causi una operazione sul server, senza la necessita di postare alcun FORM. Abbiamo visto come tramite Javascript sia possibile modificare il contenuto di una porzione della pagina, e di come gli elementi possano scomparire e ricomparire. Questo è sufficiente per creare pagine i cui contenuti si aggiornano in maniera dinamica in linea teorica. In pratica per il sistema avere una utilità reale serve che ad una azione dell’utente vengano visualizzati dati che noi non potevamo avere già in memoria. Immaginate un programma di gestione del magazzino scritto in Ajax. Quando l’utente digita il codice di una particolare merce immediatamente appare nella pagina la quantità ancora disponibile in magazzino. Ovviamente non è pensabile che tutti i dati del magazino siano nella memoria di Javascript, dunque è necessario eseguire una richiesta al server “di nascosto”, e appena si ottiene la risposta necessaria aggiornare la pagina.

Altro esempio, una web mail scritta in Ajax (chi non conosce Gmail?). Alla pressione del tasto Delete l’email viene cancellata. Eliminare la riga di quella email dalla lista delle email è semplice, abbiamo già visto come fare. Ma chi dice al server di cancellare l’email dal database se non è possibile spedire un FORM?

Quello che ci vuole per risolvere questi problemi è la capacità di fare richieste al server in maniera asincrona, ovvero in background, senza che l’utente si accorga di niente. In questo modo Javascript può contattare il server spedendo e ricevendo informazioni senza che la pagina venga ricaricata. Ma come si fa nella pratica?

L’oggetto XMLHttpRequest

Javascript è capace di fare richieste HTTP in background sia utilizzando il metodo GET che il POST. Noi ci occuperemo solo del primo perchè nella pratica è quello che si utilizza di più e una volta che conoscete questo, se vi fosse necessario, utilizzare l’altro non sarà una cosa complicata. Per poter fare tale richiesta è necessario utilizzare un oggetto che si chiama XMLHttpRequest in tutti i browser moderni escluso Internet Explorer che necessita di un diverso oggetto. Prima facciamo finta che Internet Explorer non esista (ho quasi l’impressione che il mondo riesca ad andare avanti lo stesso). Ciò che serve per fare una richiesta HTTP in Ajax è ovviamente un pò di Javascript, e dall’altra parte (nel server) qualcuno che risponda alla richiesta, ovvero un piccolo script in PHP. Ovviamente l’applicazione server-side può essere scritta in qualunque linguaggio, tutti gli esempi di questo articolo sono scritti in PHP perchè lo conosce anche mia zia Caterina, esperta di programmazione web e di uncinetto, a cui dedico questo articolo.

La prima cosa che vi mostro è la funzione che crea un oggetto XMLHttpRequest.


function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

Bisogna spiegare cosa fa questo codice. La funzione CreateXmlHttpReq prende in ingresso un solo argomento, una funzione, che verrà chiamata quando la richiesta è stata eseguita. Infatti Javascript è un linguaggio che per l’input/output utilizza un modello basato sugli eventi, ricordate onClick, onChange, eccetera? L’idea è che lui quando non sta fecendo niente per l’utente aspetta che si verifichi un evento associato ad una qualche funzione. Appena l’evento si verifica Javscript entra in azione chiamando l’handler (ovvero una funzione che gestisce l’evento) apposito. Bene, le richieste HTTP necessitano del tempo per essere eseguite, cosa dovrebbe fare Javascript nel mentre, aspettare? Non può perchè deve gestire il resto dell’applicazione. Dunque la richiesta viene lanciata in background. Appena ci sono novità di rilievo l’handler che noi passiamo come argomento a CreateXmlHttpReq viene chiamato per servire la nostra richiesta.

Ora che sappiamo come creare l’oggetto necessario per fare una richiesta HTTP in background, e come associarvi un handler, ci serve sapere come utilizzarlo per richiamare una data pagina e qualche altro dettaglio.


var myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);

Come potete immaginare il codice sopra setta l’oggetto XMLHttpRequest in maniera da fargli eseguire una query tramite il metodo GET al file primo.php, e nella riga immediatamente successiva spedisce la richiesta. A questo punto la richiesta parte… ma non abbiamo ancora scritto la funzione myHandler che deve occuparsi di gestirla quando ci sono novità in vista.


function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

Si noti come myRequest sia una variabile globale, infatti l’handler viene chiamato senza arogmenti, non c’è nessuno che gli comunica a quale oggetto si riferisce la richiesta per cui è stato invocato, dunque bisogna avere un riferimento globale all’oggetto XMLHttpRequest. Nel codice finale che viene presentato in questo articolo l’oggetto viene invece registrato nella chiusura (se leggete di piu’ capirete cos’e'), cio’ permette di gestire in maniera affidabile piu’ richieste concorrenti. Ma per ora non ci pensate, facciamo finta che il modo migliore sia avere una variabile globale per l’oggetto XMLHttpRequest.

Il nostro handler viene invocato più volte durante una richiesta HTTP. La proprietà readyState ci dice per quale motivo l’handler è stato chiamato in base al valore che assume.

0: uninitialized
1: loading
2: loaded
3: interactive
4: complete

Ciò che a noi interessa è fare qualcosa quando la richiesta viene completata, per questo testiamo che readyState abbia il valore 4. A quel punto sarà settata anche la proprietà status che contiene il valore dello stato della risposta HTTP, che è 200 per richieste avvenute con successo, il famoso 401 per pagine non trovate, e così via.

Come averete visto il nostro handler è una funzione che si milita a visualizzare un alert. Ora mettiamo le parti assieme e proviamo questo esempio, manca però solo una parte: il file PHP. Ecco dunque il sorgente di primo.php:

Ecco l’esempio con il codice completo e la possibilità di vederne gli effetti dal vivo.


var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);
}
</script>
<input type="button" value="Clicca per lanciare la richiesta" onClick="esempio3()" />

Nota: questo script non funziona con Internet Explorer!

Ogni volta che cliccate sul bottone Clicca per lanciare la richiesta, tale richiesta parte, quando la risposta del server è disponibile l’handler viene richiamato con la giusta combinazione di readyState e status e l’alert col contenuto della risposta viene visualizzato. Se avessimo voluto avremmo potuto mettere un DIV nella pagina e tramite la proprietà innerHTML sarebbe stato possibile mostrare il risultato della richiesta aggiornando il DIV direttamente, invece che utilizzare un alert. Questo è un buon esercizio che vi consiglio di fare subito prima di continuare a leggere l’articolo. Tra poco affronteremo argomenti un tantino più complicati dunque è consigliabile giocare un pò con i concetti esposti fino a questo punto per acquisire dimetichezza.

Internet Explorer comunque esiste

E non lo possiamo ignorare poichè più o meno l’ottanta percento delle persone lo utilizza. Per fortuna non serve modificare che una singola funzione per rendere il nostro codice compatibile con IE, la CreateXmlHttpReq2. Ecco la versione compatibile:


// Create the XML HTTP request object. We try to be
// more cross-browser as possible.
function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

Questa funzione tenta di risolvere un certo numero di problemi con diverse versioni di Internet Explorer, e un problema con una vecchia versione del browser Mozilla. Come potete vedere il modo in cui viene creato l’oggetto per la richiesta HTTP e il modo in cui viene settato l’handler variano nei diversi browser, ma gli oggetti sono molto simili e l’handler non deve essere modificato per gestire l’uno o l’altro. Ciò è importantissimo: abbiamo isolato il codice non compatibile tra i diversi browser in un’unica funzione!

C’è un secondo problema con IE in realtà, fa il caching delle richieste HTTP fatte in questo modo, dunque se sono effettuate utilizzando la stessa URL più volte, anche se lo script PHP richiamato produce diversi risultati, il risultato ottenuto sarà sempre lo stesso. Per evitare questo problema invece di richiedere qualcosa come script.php basta richiedere script.php?rand=numeroCasualie. In questo modo inganniamo IE facendogli credere che ogni volta si tratta di una richiesta diversa ed evitiamo il problema della cache. Per generare un numero casuale in Javascript si utilizza la funzione Math.random, dunque per evitare il problema della cache di IE tutto quello che dovremmo modificare nello script di sopra è la riga in cui la richiesta viene settata utilizzando il metodo open. Nello script originale usavamo:


myRequest.open("GET","primo.php");

Mentre sarebbe opportuno utilizzare:


myRequest.open("GET","primo.php&rand="+escape(Math.random()));

Un esempio completo che funziona su tutti i browser

A questo punto siamo pronti per riscrivere l’esempio di sopra con alcune modifiche. Per prima cosa utilizzeremo la funzione CreateXmlHttpReq2 compatibile con IE, secondo utilizzeremo il parametro casuale nella richiesta per evitare la cache e terzo modificheremo lo script PHP in modo da ritornare il tempo in secondi, così possiamo vedere che i dati cambiano ad ogni invio. Infine questa volta useremo un DIV per visualizzare il risultato dinamicamente utilizzando innerHTML.

Il codice integrale è il seguente.


var myRequest = null;

function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler2() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
e = document.getElementById("ex4result");
e.innerHTML = myRequest.responseText;
}
}

function esempio4() {
var nome = document.f1.nome.value;
var r = Math.random();
myRequest = CreateXmlHttpReq(myHandler2);
myRequest.open("GET","secondo.php?nome="+escape(nome)+"&rand="+escape(r));
myRequest.send(null);
}

Il PHP del file secondo.php è il seguente semplice script:

Per testare l’esempio sopra provate a immettere i nomi Giorgio, Vittorio, Augusto e premere Visualizza congome, poi provate a mettere un altro nome che non è contenuto nell’array del programma secondo.php, ad esempio Alessio. Avete capito bene come funziona il codice? Complimenti, ora potete dire di sapere come funziona Ajax, e anche spargere la voce sul fatto che le basi sono molto semplici. Ma non illudetevi, Ajax è facile, chiunque può imparare ad usarlo. Quasi tutta la programmazione è così, alla portata di tutti. La differenza che potete fare voi è che se avete talento e voglia potete diventare dei grandi programmatori, capaci di utilizzare astrazioni più potenti che vi rendono il lavoro più facile e veloce. La seconda parte di questo articolo, che è la motivazione per cui la prima parte è stata scritta, si sofferma proprio su questo: l’astrazione, ma prima permettetemi una breve digressione su XML.

XML? no, grazie

Il termine Ajax è un acronimo, e significa:

Asynchronous
Javascript
and XML

XML è una delle tre parti, eppure noi abbiamo utilizzato Ajax fino ad ora senza neppure toccare XML. Come mai? semplicemente chi ha coniato il termine pensava che il modo migliore per comunicare tra il programma che risiede sul server, e il client che fa la richiesta in Ajax, era quello di utilizzare XML. Lo pensano in molti, ma in realtà Ajax non ha niente a che fare con XML. PHP (o chi per lui) e Javascript possono spedirsi i dati in qualunque formato desiderabile. Si noti come di solito la grande quantità dei dati passi dal server al client. Ad esempio in Gmail il server spedisce al client informazioni sui messaggi, e il client si occupa tramite Javascript di visualizzare tali messaggi nella pagina dell’utente. Di solito il passaggio di parametri dal client al server avviene semplicemente passando dei parametri tramite una richeista GET, come abbiamo fatto noi poco fa nel caso del nome.

Per questa ragione uno dei miei metodi preferiti per passare dati dal server all’interprete Javascript del client è utilizzare un formato di semplice testo nel caso di operazioni molto semplici. Ad esempio se devo controllare se uno username in fase di registrazione in un servizio web è già occupato prima di ricaricare la pagina, faccio ritornare dal server un semplice OK o ERR, e controllo dal Javascript se la stringa ritornata è l’una o l’altra.

Se invece è necessario passare molti dati, utilizzo una tecnica diversa. Creo nello script che gira sul server un array Javascript e lo spedisco. Dal lato Javascript uso la funzione eval per valutare l’Array, è già pronta, non mi serve scrivere un parser. Ecco un esempio in PHP.

Semplice no? ma cosa succede se $a o $b contengono caratteri (in questo contesto) speciali come le virgolette? Per evitare qualunque problema basta utilizzare la seguente funzione.

Tale funzione prende una stringa PHP e la converte interamente in sequenze di escape nella forma \xHH dove HH è sono due cifre esadecimali. In questo modo Javascript riuscirà sempre ad interpretare la stringa in maniera corretta anche se fosse costituita da dati binari. Dal PHP potete generare semplicemente anche Array annidati, in breve strutture dati complicate quanto lo desiderate. Se volete usare XML… non vi tiene nessuno ma volevo soltanto che fosse chiaro che non è necessario e il termine è finito dentro questa tecnica di programmazione solo perchè l’autore dell’acronimo ha deciso così.

Parte seconda: facciamo di meglio

Carino Ajax vero? Ma se pensate a quanto codice abbiamo scritto per fare una mezza richiesta HTTP in Javascript, che abbiamo utilizzato in maniera esplicita una variabile globale, e quanto poco astratto dal reale problema che risolve risulta il nostro codice, non c’è mica da essere orgogliosi… dobbiamo proprio correre ai ripari.

Benvenuti nella seconda parte di questo articolo, dove (se non lo sapete già), imparerete come innalzare il livello del vostro Javascript utilizzando i concetti della Programmazione Funzionale. Se non sapete di cosa si tratta vi consiglio di leggere questa parte anche se non siete interessati a sapere di più su Ajax. In ogni caso i concetti che seguono sono assolutamente necessari per seguire la parte più avanzata dell’articolo, in cui saranno usati per creare una piccola libreria Ajax che ci libera dal tedio di fare tutto a mano, e che sembra integrata nel linguaggio.

Funzioni anonime

Utilizzando linguaggi che sono fondamentalmente imperativi, come il C, Java, PHP, Javascript (anche se l’ultimo come vedremo ha un buon supporto per la programmazione funzionale), una delle cose che capita spesso di fare è quella di scorrere un array indice dopo indice tramite un ciclo for.

Partiamo da un esempio reale… una operazione spesso necessaria è, dato un array, prendere l’elemento col valore massimo. Serve per un sacco di cose, una tra tutte: avete presente la nuova moda web 2.0, di visualizzare dei tag con un font o con un colore proporzionale alla sua popolarità? (più spesso proporzionalmente al logaritmo della popolarità). Bene, la prima cosa che serve per fare la proporzione è ovviamente sapere qual’è il valore del massimo elemento.

In javascript scrivereste abbastanza ovviamente:


var a = Array(10,5,7,81,28);
var max = a[0];
for (i = 1; i < a.length; i++) {
if (a[i] > max) {
max = a[i];
}
}

La fuzione reduce

E se vi serve sapere qual’è la stringa più lunga di un array? Vi serve un altro ciclo for. Una volta un programmatore ha detto Se per ogni ciclo for che ho scritto nella mia vita potessi ricevere un centesimo sarei ricco. Come possiamo liberarci da questa schiavitù del ciclo for? La soluzione è data dal fatto che in Javascript le funzioni sono oggetti di prima classe, che in breve significa che le funzioni così come un oggetto stringa o un numero possono essere passate come argometi ad altre funzioni e ritornate come valore di ritorno da funzioni. In pratica non c’è differenza sostanziale tra quello che si può fare con un numero, con una stringa e con una funzione. Ora abbiamo la soluzione al nostro primo problema, possiamo scrivere una potente funzione che si chiama reduce.


function reduce(a,f) {
if (a.length == 0) {
throw emptyArrayError;
}
var res = a[0];
for (var j = 1; j < a.length; j++) {
res = f(res,a[j]);
}
return res;
}

Questa piccola funzione prende in ingresso due oggetti: il primo è un array, il secondo è una funzione f. Applica f ai primi due elementi dell’array, e prende il risultato. Poi applica f al risultato e al terzo elemento dell’array, e così via. in pratica se L’array contiene i valori 1,2,3,4 il risultato di reduce è f(f(f(1,2),3),4).

Come vedete la funzione f che viene passata a reduce prende in input due argomenti, li compara, e ritorna uno dei due. Se f fosse una funzione che dati due argomenti ritorna il più grande dei due, il risultato di reduce(a,f) sarebbe il massimo elemento dell’array! Bene, ora siamo in grado di scrivere del codice che prende l’elemento più grande di un array senza ricorrere ad un clico for usando reduce. Ecco come.


function max(a,b) {
if (a > b)
return a;
else
return b;
}

var a = Array(10,5,7,81,28);
var max = reduce(a,max);

In pratica abbiamo estrapolato quello che c’è di uguale in molti cicli for e lo abbiamo separato dal resto del codice, incarnandolo nella funzione reduce. Rimane un problema, abbiamo dovuto scrivere la funzione max, e ciò può essere noioso. Ora che abbiamo reduce vorremmo utilizzarla in tanti piccoli contesti quotidiani, e scrivere continuamente funzioni aiutanti è una noia. Ma Javascript non è un linguaggio smidollato! Infatti ha un concetto molto utile, le funzioni anonime. Se in Javascript le funzioni sono oggetti come tutti gli altri, perchè devono avere per forza un nome? Una stringa non ha un nome, neppure un numero. Anche le funzioni possono non averlo, possono essere scritte in maniera “letterale”, o messe dentro una variabile, come tutti gli altri tipi di dato. Basta usare la seguente notazione.


var a = Array(10,5,7,81,28);
var maxfunction = function(a,b) { return (a>b) ? a : b };
var max = reduce(a,maxfunction);

Così come Array(1,2,3) ritorna un array, function(parametri) {codice} ritorna una funzione. Dunque nell’esempio sopra abbiamo creato una funzione e abbiamo messo il suo riferimento in una variabile, e poi l’abbiamo usata come argomento di reduce. Ma perchè usare una variabile intermedia? Ecco dunque la versione finale, in tutto il suo splendore


var a = Array(10,5,7,81,28);
var max = reduce(a,function(a,b){return (a>b)?a:b;});

Confrontate questo codice per trovare il massimo elemento di un array con quello che avevamo scritto utilizzando il ciclo for all’inizio. Non solo questo, reduce fa tutto quello che volete… avete voglia di sommare l’array? Bene:


var a = Array(10,5,7,81,28);
var sum = reduce(a,function(a,b){return a+b;});

Il limite è la vostra fantasia.

Le amiche di reduce: map e filter

Anche se per i nostri scopi la cosa importante è la comprensione delle funzioni anonime (che permetteranno di capire cosa sono le chiusure nel prossimo paragrafo), la programmazione funzionale è uno strumento potentissimo, dunque illustro brevemente altre due classiche primitive della programmazione funzionale, map e filter.

Come reduce anche map prende come input un array e una funzione f, ma invece che ridurre l’array ad un solo elemento applicando una funzione come fa reduce, map ritorna un nuovo array in cui ogni elemento è stato ottenuto trasformando il vecchio elemento nel nuovo tramite una funzione f.

In termini pratici, dato l’array 1,2,4,7 ciò che ritorna map(a,f) è f(1),f(2),f(4),f(7). Ecco la funzione map.


function map(a,f) {
var res = Array();
for (var j = 0; j < a.length; j++) {
res[j] = f(a[j]);
}
return res;
}

Questa volta la funzione f che passiamo come argomento a map è una funzione che prende un solo argomento (una funzione unaria), e ritorna un valore. Ecco un esempio di applicazione di map, che non fa altro che trasformare un array di numeri in un array dei quadrati di tali numeri.


var a = Array(1,5,4,3);
var b = map(a,function(x){return x*x});

Alla fine del programma l’array b conterrà gli elementi 1,25,16,9. Come potete immaginare è possibile sommare gli effetti di map e reduce, ad esempio provate a scrivere il codice che utilizzando queste due primitive sommi i quadrati degli elementi di un array. Si noti come anche se teoricamente siamo interessati soltanto al valore di ritorno della funzione f, sia possible forzare map a lavorare come una sorta di foreach.


var a = Array(1,5,4,3);
map(a,alert);

Queste due righe di codice avranno l’effetto di fare l’alert di tutti gli elementi dell’array. Il risultato della funzione map non viene utilizzato in nessun modo perch&egrabe; non è nostro scopo, in questo caso siamo solo interessati nell’effetto collaterale (o side effect) che ha la chiamata della funzione f (ovvero alert), che è quello di visualizzare i numeri.

L’ultima delle funzioni che giocano un ruolo importante tra le primitive della programmazione funzionale su cui ci soffermeremo è filter. Questa funzione sarà solo descritta in quanto concettualmente molto simile alle altre due. L’implementazione di filter è lasciata come esercizio al lettore. Ma cosa fa filter? Dato un Array e una funzione unaria f in ingresso, ritorna un Array composto solo dagli elementi per cui la chiamata alla funzione f restituisce true. In pratica filter filtra l’array e ne crea uno che ha come elementi solo quelli che piacciono alla funzione passata come argomento, che utilizza il valore di ritorno true o false per indicare se tenere o scartare ogni dato elemento

Utilizzando assieme map, filter e reduce è per esempio possibile in una singola linea di codice processare un array per tenere solo gli elementi che sono maggiori di 10, elevarli al quadrato e ottenerne la somma. Ma ora è tempo di chiudere questa (spero interessante) parentesi e continuare il nostro breve incontro delle caratteristiche evolute di Javascript.

Le chiusure

La più semplice definizione di chiusura, e anche una delle meno immediatamente comprensibili per chi non le conosce, è la seguente: una chiusura è una funzione con uno stato ad essa associato. Cosa significa di preciso? Per spiegarlo bisogna fare un passo indietro, e ritornare alle funzioni anonime di cui abbiamo parlato prima (se non ricordate bene cosa sono, tornate indietro a fare un ripasso e poi ritornate qui!). Abbiamo detto che in Javascript le funzioni sono un oggetto di prima classe, e abbiamo infatti visto come sia possibile passare una funzione come argomento ad un’altra funzione. Abbiamo anche affermato che è possibile scrivere funzioni che ritornano funzioni come argomento. Ad esempio il codice


function creaFunzione() {
var f = function() {return 1};
return f;
}
var b = creaFunzione();
alert(b());

quando viene eseguito mostra un alert in cui c’è scritto 1. La funzione creaFunzione ritorna una funzione che non fa altro che ritornare 1 (scusate il gioco di parole, ma è proprio cosi, creaFunzione ritorna una funzione che quando viene chiamata ha come valore di ritorno l’intero 1). Tale funzione ritornata da creaFunzione viene salvata dentro la variabile b. Da questo momento in poi b può essere usata come una funzione, infatti la chiamiamo nell’ultima riga del programma di esempio, per ottenere l’argomento di alert.

Fin qui nulla di nuovo. Esistono le funzioni anonime, e come tutte le altre funzioni sono oggetti di prima classe: possono essere utilizzato come argomento, ritornate da altre funzioni, tenute dentro le variabili, e qualunque altra cosa fareste con un numero, una stringa o un array (anch’essi tutti oggetti di prima classe). Ma cosa accade se nel corpo di una funzione anonima c’è un riferimento ad una variabile che è definita al momento della sua creazione nello scopo esterno ad essa? Un esempio chiarirà cosa voglio dire.


function creaFunzione(valore) {
var f = function() {return valore};
return f;
}

La variabile valore esiste mentre la funzione creaFunzione viene eseguita, e come potete vedere compare nel corpo della funzione anonima che alla fine restituiamo come valore di ritorno. Ma quando utilizzeremo la funzione anonima creata, creaFunzione non sarà più attiva, dunque cosa contiene la variabile valore quando la funzione anonima viene invocata?. Concentratevi che questo è un passaggio delicato. Ciò che accade è che la funzione anomina create ricorderà il riferimento all’oggetto che aveva la variabile valore al momento in cui la funzione anonima è stata creata. Dunque se scrivo


a = creaFunzione(10);
b = creaFunzione(20);
a(); // ritorna 10
b(); // ritorna 20

Le funzioni a e b ritorneranno ad ogni chiamata rispettivamente 10 e 20! Ecco cosa significa che una chiusura è una funzione con uno stato ad essa associato. La chiusura ricorda tutti i riferimenti a variabili esterne al momento della sua creazione. La cosa interessante è che questo stato che la chiusura si porta appresso può anche essere modificato.

Per esempio è possibile scrivere una funzione che ritorna delle funzioni che contano.


function creaContatore() {
var c=0;
return function() {
return c++;
}
}

var a = creaContatore();
var b = creaContatore();
a(); /* ritorna 0 */
a(); /* ritorna 1 */
a(); /* ritorna 2 */
b(); /* ritorna 0 */
b(); /* ritorna 1 */
a(); /* ritorna 3 */

Ad ogni chiamata a() e b() ritornano l’intero successivo (partendo da zero), e ricordano dove erano arrivate. Siccome questo non è un corso completo di programmazione funzionale non mi posso spingere oltre, ma provate a immaginare le possibilità… (argh, sembra lo spot della Apple).

Chiusure e handler?

C’è un campo in cui è necessario soffermarsi sull’applicazione delle chiusure: le funzioni che gestiscono eventi in Javascript, ovvero i così detti handler. Partiamo da un problema reale, e vediamo come viene affrontato tramite le chiusure. In una pagina HTML ci sono due elementi: uno spazio in cui l’utente può scrivere qualcosa (un banale elemento INPUT di tipo text) e un bottone. Alla pressione del bottone Javascript fa partire un timer, che dopo dieci secondi mostrerà un alert che visualizza cosa c’era scritto nell’INPUT al momento in cui l’utente aveva premuto il tasto. Eccovi l’esempio funzionante.

L’utente potrebbe ad esempio scrivere hello e premere il tasto, poi scrivere world e premere il tasto. Dopo alcuni secondi vedrebbe in successione due alert, uno in cui è scritto hello e l’altro in cui è scritto world. Per implementare un tale programma qualcuno potrebbe essere tentato di scrivere qualcosa come:


function whenButtonIsPressed() {
setTimeout(showAlert, 10000);
}
function showAlert() {
var e = object.getElementById("inputobj");
alert(e.value);
}

Nell’esempio immaginiamo che il bottone abbia un evento onClick che richiama la funzione whenButtonIsPressed e che il testo digitato dall’utente sia contenuto in un elemento INPUT con ID inputobj.

Ovviamente il codice mostrato sopra non funziona, perchè l’handler del timer, ovvero la funzione showAlert, va a leggere il contenuto dell’INPUT solo quando deve visualizzare l’alert. Se nel mentre il contenuto è cambiato perchè l’utente nel corso dei 10 secondi ha scritto qualcosa di nuovo il nostro gioco non funziona. Noi vogliamo che alla pressione del tasto, l’alert risultante 10 secondi dopo visualizzi quello che c’era scritto quando il tasto era stato premuto. Ci servirebbe un handler che ha memoria del passato… ovvero, una chiusura! Ecco il codice corretto:


function whenButtonIsPressed() {
var string = document.getElementById("inputobj").value;
var myHandler = function() {
alert(string);
};
setTimeout(myHandler, 10000);
}

Abbiamo risolto il problema con un’unica funzione. La chiusura che usiamo come handler ha un riferimento a string, dunque si crea un collegamento tra l’oggetto che conteneva tale variabile al momento della creazione della funzione e la funzione stessa.

Nota: questo particolare problema potrebbe essere risolto anche tramite eval(), ma ci sono molti casi in cui le chiusure risolvono problemi non risolvibili con eval() e tantissimi altri casi in cui risolvono i problemi in maniera molto più elegante.

Ajax comodo

Siamo prossimi alla conclusione. Con le conoscenze acquisite ci proponiamo di scrivere delle funzioni che rendono Ajax così semplice che per fare una query in Ajax e mostrare la risposta in un alert basterà scrivere:


ajaxGet("primo.php",myHanlder);
function myHandler(content) {
alert(content);
}

In pratica la funzione ajaxGet dovrà predisporre la query, e poi chiamare l’handler passando come primo argomento il risultato della richiesta HTTP solo se la richiesta è andata a buon fine. Non c’è nessuna variabile globale, nessun controllo dello stato, tanto meno la ripetizione del codice necessario per creare l’oggetto necessario alla richiesta e alla sua inizializzazione. Ma non ci accontentiamo di questo, l’altra importantissima caratteristica che deve avere la nostra nuova interfaccia verso Ajax è la seguente: qualunque argomento addizionale passato alla funzione ajaxGet dovrà essere passato all’handler quando la richiesta viene completata, dunque il codice:


ajaxGet("primo.php",myHandler,"a",10);
function myHandler(content,first,second) {
alert(content);
alert(first);
alert(second);
}

Avrà l’effetto di eseguire la richiesta e chiamare l’Handler con la risposta ottenuta dal server come primo argomento, la stringa “a” come secondo argomento e l’intero 10 come terzo. Riflettete un pò su questa caratteristica e vi accorgerete come ora la richiesta sia in grado di portarsi appresso lo stato, e permetta dunque di usare lo stesso handler per gestire diverse situazioni. Infatti dietro l’implementazione di ajaxGet ci sono proprio le chiusure, abbiamo preso i vantaggi della closure e li abbiamo trasportati nella nostra API, anche se nella pratica per usare tale API non serve conoscere le chiusure.

E’ importante notare come la possibilità di passare argomenti addizionali all’handler aumenti la potenza della nostra interfaccia. Immaginate di avere due divesi elementi DIV nella pagina. Volete fare delle richieste a diversi file PHP e visualizzare il contenuto in un DIV o nell’altro tramite innerHTML. Potete semplicemente scrivere:


ajaxGet("primo.php",myHandler,"primodiv");
function myHandler(content,elementid) {
var e = document.getElementById(elementid);
e.innerHTML = content;
}

Se più tardi volete fare una nuova richiesta ma visualizzare il risultato in un DIV diverso, potrete riutilizzare il vecchio handler e scrivere semplicemente:


ajaxGet("primo.php",myHandler,"secondodiv");

Vedrete come nella vita reale qualunque applicazione Ajax non banale presenta questo tipo di necessità. Ora che abbiamo visto come vorremmo che fosse la nostra interfaccia verso Ajax, andiamo ad implementarla utilizzando le tecniche di programmazione imparate fino ad ora e qualcuna nuova che sarà esposta quando occorre.

Implementazione

Iniziamo dalla fine, mostrando il codice completo della funzione ajaxGet e della sua funzione aiutante ajaxOk.


var ajax_req = null;

function ajaxOk() {
if (ajax_req.readyState == 4 && ajax_req.status == 200) {
return ajax_req.responseText;
} else {
return false;
}
}

function ajaxGet(url,handler) {
var a = new Array("placeholder");
for (var j=2; j
La funzione ajaxOk svolge un compito banale, se avete ancora fresca nella memoria la prima parte dell’articolo ricorderete che le proprietà readyState e status dell’oggetto xmlHttpReq vengono utilizzate per controllare lo stato della richiesta, ovvero se è andata a buon fine. In caso positivo, tramite la proprietà responseText si può ottenere il contenuto della riposta HTTP. Alla luce di questi fatti si vede subito che ajaxOk non fa altro che controllare se la richiesta registrata nella variabile globale ajax_req sia terminata con esito positivo, e in tal caso ritornare la risposta ottenuta. In caso contrario invece viene ritornato false.
Analizziamo ora il pezzo forte, ovvero ajaxGet. Questa è una funzione che utilizza un numero variabile di argomenti. In Javascript ogni funzione ha accesso esplicito alla lista di argomenti con cui è stata chiamata tramite l’array arguments. Quello che fanno le prime righe di codice di ajaxGet è predisporre un array con il primo elemento settato a una stringa arbitraria (che sarà poi rimpiazzata dal testo della riposta HTTP), e tutti gli altri argomenti settati al valore passato dall’utente ad ajaxGet come argomenti addizionali. In pratica questo array sarà utilizzato per chiamare l’handler quando la richiesta Ajax è completa. Infatti sotto si procede alla creazione dell’handler vero della richiesta, quello che poi chiamerà l’handler più astratto, in pratica il vero handler fa da wrapper o da interfaccia per usare un termine italiano a quello di più alto livello. Utilizzando la funzione ajaxOk il vero handler controlla che la richiesta abbia avuto buon fine (altrimenti non fa nulla), in caso positivo setta il primo elemento dell’array a alla risposta ottenuta. Ora l’array a contiene una la lista degli argomenti con cui richiamare l’handler di alto livello, e il gioco è fatto. Si noti come sia l’array a che l’argomento handler della funzione ajaxGet siano memorizzati nella chiusura assegnata alla variabile myHandler. Ecco dunque a cosa servivano le chiusure in questa nostra libreria.
La funzione apply
Siamo all’ultima riga di codice che rimane oscura:

return handler.apply(this, a);

Cosa fa apply?. Il problema è il seguente: l’handler reale deve chiamare il nostro handler di alto livello con la lista di argomenti settati nell’array a. Come si richiama una funzione utilizzando come argomenti gli elementi di un array? In breve se ho un array che contiene gli elementi “a”, “b” e “c”, e una funzione f(), vorrei avere qualcosa che produca l’effetto di una chiamta a f(“a”,”b”,”c”). Il metodo apply di ogni oggetto funzione Javascript fa proprio questo. A questo punto dovrebbe essere tutto chiaro, le seguenti righe di codice non fanno altro che creare la richiesta e assegnarla alla variabile globale ajax_req, e finalmente spedire la richiesta.
La variabile globale
Come avete visto anche se nell’utlizzo della nuova interfaccia non c’è traccia di variabili globali, nella implementazione l’abbiamo utilizzata. Ciò era in questo caso desiderabile perchè la funzione CreateXmlHttpReq si occupa sia di creare l’oggetto necessario alla richiesta XmlHttpReq che di settare l’handler. Separando tale funzione in due parti, una che crea la richiesta ed una che setta l’handler, la necessità di una variabile globale non sussiste più, ma poichè viene fatta al massimo una richiesta Ajax per volta e non volevo rimettere le mani nel codice esposto nella prima parte per non creare confusione ho preferito questa soluzione. In realtà non c’è alcun motivo per non registare anche l’oggetto della richiesta nella chiusura, dunque una buona esercitazione è quella di riscrivere il codice in modo da evitare le variabili globali (anche se nella vita reale l’implementazione esposta potrebbe essere più conveniente perchè la parte incompatibile tra i diversi browser viene isolata in una sola funzione).
Internet Explorer 5
Purtroppo il codice sopra esposto non funzionerà con Internet Explorer 5, perchè tale browser non implementa apply. Siccome ancora c’è circa l’un percento della popolazione di internet che utilizza tale browser è bene sopportarlo in qualche modo. A tal fine ho scritto una implementazione di apply utilizzando la funzione eval:

function myDummyApply(funcname,args) {
var e = "funcname(";
for (var i = 0; i < args.length; i++) {
e += "args["+i+"]";
if (i+1 != args.length) {
e += ",";
}
}
e += ");"
return eval(e);
}

Anche ajaxGet va modificata per utilizzare tale funzione se la apply reale fallisse. Ecco dunque il codice integrale completo di ogni pezzo che implementa l’interfaccia Ajax comoda da usare.
(30 Maggio 2007) Nota: la funzione e’ stata aggiornata per memorizzare l’oggetto della richiesta Ajax nella chiusura, questo significa che la nuova funzione ora gestisce richieste simultanee senza problemi. Questa modifica e’ stata fatta nel codice che uso in produzione da un anno ma ho sempre dimenticato di metterla online, scusate per l’inconveniente. Consiglio a tutti di utilizzare questa nuova versione.

/* Copyright(C) 2005,2006,2007 Salvatore Sanfilippo 
* All Rights Reserved. */

// Create the XML HTTP request object. We try to be
// more cross-browser as possible.
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

// An handler that does nothing, used for AJAX requests that
// don't require a reply and are non-critical about error conditions.
function DummyHandler() {
return true;
}

// Shortcut for creating a GET request and get the reply
// This few lines of code can make Ajax stuff much more trivial
// to write, and... to avoid patterns in programs is sane!
function ajaxGet(url,handler) {
var a = new Array("placeholder");
for (var j=2; j
Nel codice finale ci sono due aggiunte. La prima è una funzione DummyHandler che non fa proprio niente. Si usa come handler Ajax quando si vuole semplicemente fare una richiesta al server senza avere alcuna risposta. Si potrebbe modificare la ajaxGet in modo da accettare false come handler e capire da sola che non deve chiamarlo in tal caso.
La seconda aggiunta è una versione potenziata di ajaxGet che si chiama ajaxGetRand che aggiunge automaticamente alla richiesta un parametro casuale per evitare i problemi di cache di Internet Explorer esposti nella prima parte dell’articolo.
Gestione degli errori
Per completezza ci sarebbe ancora una cosa da fare per migliorare questo codice: si dovrebbe gestire la condizione di errore delle richieste e visualizzare un alert, qualcosa come Problemi di comunicazione col server se la richiesta fallisce. Poichè questo articolo ormai sfiora le 60000 battute, non mi resta che lasciare anche questo come esercizio al lettore volenteroso, e passare alle conclusioni.
Escape degli argomenti della richiesta
Quando si fa una qualunque richiesta HTTP utilizzando il metodo GET, è necessario fare l’escape degli argomenti nella richiesta in modo da essere certi che non contengano caratteri che in una query sono considerati speciali come ad esempio ?, +, & ed altri ancora. A questo scopo bisogna utilizzare la funzione Javascript encodeURIComponent che è più o meno l’equivalente della funzione PHP urlencode. Dunque se devo passare un parametro tramite ajaxGet ad uno script PHP scriverò qualcosa come:

ajaxGet("/script.php?parametro="+encodeURIComponent(parametro),myHandler);

I browser più vecchi quali il solito IE 5 non possiedono tale funzione, ma una meno sicura che non fa l’escape in maniera corretta di alcuni caratteri (come il +), chiamata escape (la funzione inversa è unescape). Se dovete passare parametri che sicuramente non contengono uno spazio potete accontentarvi di escape, altrimenti è necessario usare la giusta funzione. Se proprio volete il massimo della compatibilità vi consiglio di scrivere una funzione per conto vostro che faccia l’escape di tutti i caratteri tranne alcuni contenuti in una lista (i caratteri alfanumerici nell’intervallo A-z e 0-9 non hanno bisogno di alcun escape).
Conclusioni
Forse avrei potuto fare un articolo lungo un decimo, mostrando direttamente il poco codice che serve a rendere Ajax più comodo ed astratto da utilizzare, e rimandando ogni parte meno ovvia del codice a riferimenti esterni, avrei anche evitato di spendere le quasi 8 ore che ci sono volute per scrivere questo articolo, ma non credo sarebbe stato lo stesso. Le risorse in inglese su Ajax abbondano mentre in italiano c’è ben poco, dunque pensavo che sarebbe stato utile avere in un unico articolo una introduzione ad Ajax e un approfondimento sulle tecniche evolute di programmazione con Javascript. Spero vivamente che questo articolo serva ad almeno un programmatore di lingua italiana a scoprire qualcosa di nuovo. Ringrazio tutti i lettori che sono arrivati a leggere fino a questo punto, non erano argomenti semplicissimi. Alla prossima. 
Javascript playground
La Javascript console di Firefox (IE manco la possiede) non è esattamente il massimo per sperimentare con Javascript, problema che ho avvertito più volte in passato e che sto constatando ancora una volta mentre scrivo questo articolo, per questo motivo propongo la Javascript playground, una area di testo e relativa finestra dove va a finire l’output, e che serve ovviamente per giocare con Javascript.
L’utilizzo è semplice: scrivete uno script nell’area di testo arancione, premete “esegui”, e vedete l’output nella parte grigio chiara. Per emettere l’output dovete usare due funzioni normalmente non disponibili in Javascript ma implementate qui di proposito: echo, e clearscreen. La prima prende un argomento e lo stampa nella finestra di output, la seconda cancella tutto il contenuto dell’area di output. E’ più facile guardare l’esempio che spiegare come funziona mi sa  
clearscreen();for (var i=0;i<10;i++){echo(i+"\n");}




Articolo tratto da : http://antirez.com/articoli/spaghettiajax.html

Autore : Salvatore Sanfilippo

Estensioni Firefox: la Top 10 per il Web Design

admin — Thu, 29 Jan 2009 00:55:33 +0000

Firefox si è rivelato uno dei migliori browser per lo sviluppo sul web, uno strumento indispensabile per ogni Web Designer al di là della sua diffusione presso i non professionisti.

In questo articolo voglio elencare le 10 estensioni di Firefox a cui non potrei mai rinunciare, che mi aiutano nel lavoro di tutti i giorni e che spero possano risultare utili a chi ancora non le conosce.

1. Web Developer

Aggiunge una toolbar con numerosi strumenti e funzionalità, dalla possibilità di disabilitare i CSS alla validazione della pagina corrente.

2. Firebug

Permette di fare il debug e modificare il contenuto di una pagina con pochi clic, monitorando CSS, HTML e Javascript in tempo reale. La considero un’estensione complementare a Web Developer, piuttosto che sostitutiva.

3. CSS Mate

Estensione fondamentale per fare test al volo sui CSS di una pagina, avendo un feedback immediato.

4. IE Tab

Per testare un sito è comodo avere degli strumenti che facilitino lo switch tra i vari browser. Questa estensione permette di visualizzare una pagina con il rendering engine di Internet Explorer dentro una tab di Firefox.

5. IE View Lite

Variante di IE Tab (vedi sopra), consente di aprire la pagina corrente in una finestra di Explorer tramite una voce nel menu contestuale.

6. OperaView

Estensione dal funzionamento analogo ad IE View, utile per aprire una pagina sul browser Opera.

7. HTML Validator

Aggiunge all’interno della finestra per la visualizzazione del codice alcune indicazioni utili sulla validazione della pagina. Segnala errori e warnings, con utili suggerimenti per correggerli.

8. MeasureIt

Semplice ma utilissimo tool che crea un righello con il quale misurare gli elementi di una pagina.

9. Screengrab!

Per catturare screenshot di una pagina salvando solo la porzione visibile o tutto il contenuto. Questa estensione è stata migliorata ed il salvataggio dei file immagine ora è molto più veloce.

10. SEO for Firefox

Aggiunge informazioni utili ai risultati della ricerca di Google: PageRank, età del dominio, numero di links, rank su Technorati ed Alexa e molto altro.

Trovate queste estensioni di Firefox anche nella pagina utility di TomStardust.com, insieme ad altre risorse. Se avete consigli sull’argomento o se pensate che nell’elenco manchi qualcosa di importante non esitate a dirlo nei commenti!

Articolo tratto da: http://www.tomstardust.com/archives/estensioni-firefox-la-top-10-per-il-web-design/

Autore: Tommaso Baldovino

Guida Introduttiva a PHP 5

admin — Tue, 09 Dec 2008 11:00:51 +0000

Lo scopo di questa guida è quello di portare le conoscenze di un neofita del PHP, a livello professionale.

Anche chi non ha mai programmato in PHP puo’ tranquillamente avvicinarsi a questo fantastico linguaggio, per la prima volta, con questa guida che illustrerà passo passo e in modo dettagliato tutte le caratteristiche di PHP 5.

Dalla struttura del linguaggio, alle nozioni necessarie per creare delle vere e proprie applicazioni web.

PHP è un linguaggio Server-Side che vi permetterà di creare delle pagine dinamiche, scrivendo il vostro codice anche in mezzo alla stessa pagina HTML.

Server-Side significa che il vostro codice risiederà solo sul server, e che non sarà pertanto possibile accedere ai sorgenti dal lato client, come invece accade con linguaggi Client-Side come JavaScript.

In pratica, quando un utente apre una vostra pagina PHP, il Web Server viene interrogato e restituisce al client niente altro che una semplice pagina HTML o XHTML ecc…

La pagina HTML che il client visualizzerà, sarà prodotta da PHP grazie alle vostre direttive.

Prima di iniziare a programmare, è necessario che vi procuriate il software necessario.

Per testare le vostre applicazioni, AppServ andrà più che bene.
E’ un pacchetto autoinstallante per piattaforma Windows, che installerà e configurerò automaticamente tutti i pacchetti di cui avrete bisogno, nel vostro PC.

Al momento in cui scrivo è disponibile la versione AppServ 2.5.10 :

Apache 2.2.8
PHP 5.2.6
MySQL 5.0.51b
phpMyAdmin-2.10.3
MySQL Root Password Reset

Una volta installato AppServ, aprite il vostro browser e digitate questo indirizzo per vedere se l’installazione ha avuto successo :

http://localhost/

Se vi appare una pagina rosa con la scritta “The AppServ Open Project” allora è tutto ok.

Ora vi serve solo un editor con cui scrivere e modificare il vostro codice, e al riguardo vi segnalo l’ottimo e gratuito PSPad con cui ho realizzato questo sito, in concomitanza con Aptana.

Nella prossima pagina vedremo come configurare in modo ottimale PSPad, per programmare in PHP.

Articolo e intera guida tratta da : http://www.realizzazione-sito.info/guide/php_5

Ringraziamo l’autore della guida (Francesco Casula) ricordando che la stessa è stata rilasciata sotto licenza Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.

Alla prossima.

Stabilire la durata delle sessioni cookie in PHP

admin — Fri, 28 Nov 2008 14:35:15 +0000

Quando stiamo creando un sito in PHP, che richiede autenticazione o in ogni caso una gestione delle sessioni, è sempre importante stabilire la durata di una sessione, perché la cosa più fastidiosa è trovarsi buttati fuori da un sistema, solo perché ci si è allontatati dalla postazione oppure si è ricevuta una telefontata.

Dannazione!

In questo articolo spiegherò come impostare i giusti settaggi di PHP, preferibilmente nel file /etc/php5/cgi/php.ini oppure tramite il comando ini_set.

Il primo settaggio da impostare è session.cookie_lifetime, che specifica QUANTO un cookie deve durare sulla macchina del visitatore, misurato in secondi; di default è impostato a 0, che non significa per sempre, ma piuttosto fino a quando il browser non viene chiuso. Dei valori di riferimento sono: 3600 = 1 ora; 28800 = 8 ore; 86400 = un giorno.

Per impostare questo parametro, o si edita il file etc/php5/cgi/php.ini oppure si utilizza la funzione, se abilitata, ini_set(’session.cookie_lifetime’, 3600).

Fatto questo, passiamo a session.gc_maxlifetime, che stabilisce quanto una sessione dura sul server, cioè dopo quanti secondi il nostro fido PHP butta via una sessione che non ha aggiornato dati. Il paramentro è più subdolo di quanto possa sembrare, perché una sessione creata alle 8:00, viene considerata vecchia di 10 minuti già alle 8:10 anche se l’utente continua a visitare il sito, se nessun dato dell’array $SESSION viene aggiornato, quindi sta a te stabilire da quanto considerare una sessione scaduta, se dalla sua creazione/ultimo aggiornamento reale, oppure se dall’ultima visita, in questo caso, ad esempio incremetare una variabile dummy ad ogni pagina, con il comando $SESSION['keepailve']++ dopo esserti ricordato di inizializzare keepalive alla creazione della sessione.

In ogni caso, questo parametro non andrà MAI oltre quello precedente, quindi se alzi maxlifetime, devi ricordarti di fare altrettanto con cookie_lifetime.

Ora veniamo al bello, da solo il parametro maxlifetime non basta, perché PHP non passa ogni istante, per fortuna del tuo server, a controllare quali sessioni buttare, altrimenti il carico diventa eccessivo, piuttosto ha una data probabilità di farlo ad ogni pagina generata. I parametri sono session.gc_probability e session.gc_divisor. Immaginiamo di averli impostati a:

session.gc_probability = 7 session.gc_divisor = 80

Bene, allora per ogni pagina visitata, PHP controllerà (o meglio lo farà il Garbage Collector, ma questo è un dettaglio) tutte le sessioni valide, con una probabilità di 7 su 80 = 7/80 = 0.0875

Io ti consiglio di lasciare le impostazioni di base, cioè rispettivamente 1 e 100, ma dipende solamente dal server e dalle pageviews del tuo sito.

L’articolo è tratto da: http://www.timendum.net/blog/201/prolungare-o-accorciare-le-durate-delle-sessioni-cookie-con-php-session-gc_maxlifetime-e-lifetime/

Articolo tratto da : http://www.timendum.net/blog/201/prolungare-o-accorciare-le-durate-delle-sessioni-cookie-con-php-session-gc_maxlifetime-e-lifetime/

Microsoft annuncia Internet Explorer 8

admin — Mon, 10 Mar 2008 15:42:36 +0000

Microsoft annuncia in questo articolo l’intenzione di avviare con la nuova versione del suo popolare browser Internet Explorer, un processo di adeguamento agli standard più significativi del world wide web. Nella nuova release di Explorer, la 8, sarà l’utente a scegliere il grado di flessibilità del proprio browser scegliendo tramite un apposità opzione i tre diversi livelli di compatibilità.

La notizia più che positiva è che MICROSOFT abbia finalmente deciso di visualizzare le pagine web secondo gli standard previsti dal World Wide Web Consortium (W3C), agevolando cosi il compito degli sviluppatori di applicazioni e siti web e consentendo agli utenti di avere una visualizzazione corretta delle pagine.

Il cambiamento di rotta, richiesto a gran voce da web designer e utenti, rappresenta un notevole passo in avanti rispetto alle versioni precedenti di explorer specialmente per quanto riguarda la versione 6 giudicata da molti come il peggior browser mai visto in circolazione.

IE 8 avrà tre modalità, dalla più restrittiva che interpreterà le pagine secondo i dettami del W3C a una seconda modalità meno rigida e che mostrerà le pagine esattamente come fa attualmente IE 7 terminando con l’ultima che permetterà di gestire correttamente anche le pagine ottimizzate per le versioni precedenti di IE.

Configurare PHP, Apache, MySql, PhpMyAdmin su Windows

admin — Tue, 30 Oct 2007 16:06:58 +0000

Ecco una breve guida per la configurazione di un server web basato su Apache PHP e Mysql in ambiente Windows; al termine del tutorial sarete in grado di montare un sito web in locale dove potrete sviluppare e testare il codice PHP delle vostre applicazioni web.

Per prima cosa dotiamoci del software di cui abbiamo bisogno…

Per installare l’Apache HTTP Server andare su http://httpd.apache.org/download.cgi, una volta entrati clicchiamo su “other files” ed entriamo nella directory binaries/win32, scarichiamo quindi l’installer (msi) dell’ultima versione disponibile (2.2.6) .
Possiamo ora scaricare l’interprete del PHP dal sito http://www.php.net/downloads.php , avendo cura di scaricare il pacchetto zip dei binari per windows.
Scaricare il database mysql per windows all’indirizzo http://dev.mysql.com/downloads/ .
Scaricare il software phpMyAdmin dal sito http://www.phpmyadmin.net/ .

Per prima cosa avviare l’installer di apache, durante l’esecuzione dell’installer dopo avervi sottoposto la licenza, il programma vi chiederà se volete configurare il servizio sulla porta 80 (default) in modalità di avvio automatico oppure sulla porta 8080 in modalità di avvio manuale.

Se sceglierete la prima opzione assicuratevi di avere la porta 80 a disposizione o a meno di modifiche nella configurazione dell httpd.conf, il vostro server web non salirà (idem per la 8080). Nel caso invece si seguisse la strada di installarlo settando la seconda opzione bisognerà aver cura di avviare il servizio manualmente.

Effettuare la scelta e proseguire con l’installazione, dopotutto sarete comunque in grado di configurare la porta di ascolto successivamente editando il file di configurazione httpd.conf disponibile nella directory conf di Apache.

A questo punto estrarre il contenuto dei binari PHP e rinominare la cartella in php. Metterla per comodità sulla root di del disco rigido, in C:\php .

Passiamo ora ad installare il server di database MySql, estrarre l’archivio scaricato e avviare l’installer. Al termine della procedura di installazione eseguire la configurazione immediata, proseguire scegliendo una configurazione standard e selezionando le opzioni Install As Windows Service e Include Bin Directory in Windows Path.

A questo punto prima di concludere l’installazione scegliere la password di root (amministratore) e terminare effettuando la scrittura del file di configurazione mysql.ini .

Occupiamoci ora di configurare il php, a tal fine andare nella cartella C:\PHP e creare il file di configurazione php rinominando il file php.ini-recommended (effettuare prima una copia di backup) in php.ini, possiamo ora gestire la configurazione del php editando il file php.ini .

Per installare PHP come modulo su Apache, e consentire al server di interpretare il codice php, aprire il file httpd.conf presente nel path di installazione di Apache sotto la directory conf e scorrere il file con un editor fino alle direttive LoadModule… Aggiungere in coda le seguenti direttive…

LoadModule php5_module “c:/php/php5apache2_2.dll”
AddType application/x-httpd-php .php

# configure the path to php.ini
PHPIniDir “C:/php”

Per chiarezza nella prima direttiva si aggiunge ad apache il modulo di php, nella seconda si aggiunge il tipo di applicazione e nella terza si comunica ad apache dove trovare il file di configurazione di php.

Apache e PHP ora dovrebbero funzionare insieme, per effettuare una prova :

creare un file chiamato phpinfo.php contenente il codice sottostante e spostarlo nella directory htdocs (document root) sotto apache
avviare/riavviare apache, aprire un browser e digitare http://localhost/phpinfo.php (nel caso avessimo configurato apache su un altra porta/ip usare http://host:porta/phpinfo.php)

Se tutto è andato bene dovremmo visualizzare un risultato simile.

Provvediamo ora alla configurazione delle estensioni di mysql per php; apriamo il php.ini e occupiamoci di togliere i puntievirgola iniziali dalle seguenti estensioni:

extension=php_mysql.dll
extension=php_mysqli.dll

Troviamo all’interno del file la direttiva che configura il path dove php cercherà le estensioni…

extension_dir = “./”

Questo parametro indica il percorso relativo o assoluto a partire dal quale php cercherà le estensioni. Nel caso si avessero delle esigenze specifiche modificarlo opportunamente tenendo conto che se si specifica un percorso relativo php cercherà le estensioni a partire dalla stessa directory del php.ini .

Copiamo il file C:\php\libmysql.dll in C:\php\ext e modifichiamo l’extension_dir in questo modo:

extension_dir = “C:\php\ext”

Infine copiare il file C:\php\libmysql.dll dentro C:\windows\system32 , salviamo il php.ini e riavviamo il server.

A questo punto possiamo testare la connessione con il seguente script:

// Connessione a MySQL
$link = mysql_connect('localhost', 'root', 'password_root_mysql') or die('Connessione fallita: ' . mysql_error());
echo 'Connesso.';
mysql_close($link);
?>

Salviamo il codice precedente in un file chiamato test.php e mettiamolo nella directory htdocs.

Aprire un browser e digitare http://localhost/test.php (nel caso avessimo configurato apache su un altra porta/ip usare http://host:porta/test.php) e verificare che la connessione sia riuscita.

Come proteggere un form html dall’invio di SPAM

admin — Sat, 13 Oct 2007 13:29:35 +0000

In questo articolo proveremo ad illustrarvi come proteggere un form HTML dall’invio di SPAM mediante la tecnica del CAPTCHA. I form html non gestiti in modo ottimale possono essere causa di problemi sia nel caso in cui il modulo invii delle informazioni tramite email che nel caso inserisca le informazioni in un database.

Il rischio principale è costituito dagli SPAMBOT ovvero dei software in grado di effettuare richieste http allo scopo di bucare i form non protetti. Le conseguenze di un attacco di questo tipo possono essere il sovraccarico del server web, malfunzionamenti del server di posta nonchè il rapido accumularsi di informazioni inutili sul Database.Il potenziale pericolo è rappresentato dal fatto che analizzando i tag di una pagina html, si possono analizzare facilmente le variabili usate per il passaggio delle informazioni, il metodo utilizzato (POST/GET) e la pagina che elabora la richiesta di invio email.

Quindi un qualsiasi individuo che vuole crearvi una grana, può, mediante un banale programmino che invia richieste HTTP effettuare la medesima richiesta infinite volte e intasarvi la posta o riempirvi il database. Per questo problema nasce l’esigenza di validare lato server le richieste effettuate tramite la pagina che si occupa nello specifico di elaborare la richiesta.

La tecnica del Captcha Code “completely automated public Turing test to tell computers and humans apart” è uno dei metodi più utilizzati per verificare se chi effettua la richiesta è un umano oppure un BOT.

A questo punto mostriamo un esempio di come implementare tale tecnica all’interno del proprio sito web:

Iniziamo con la creazione di una tabella sul nostro DB MySql che contenga le informazioni necessarie per implementare la tecnica del Captcha. Connettiamoci al nostro DB tramite PhpMyAdmin o tramite linea di comando e creiamo la tabella captcha con il seguente script:

CREATE TABLE `captcha` (
`captcha_id` varchar(255) character set latin1 collate latin1_general_ci NOT NULL,
`code` varchar(255) character set latin1 collate latin1_general_ci NOT NULL,
`timestamp` varchar(255) character set latin1 collate latin1_general_ci NOT NULL default ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Occupiamoci ora della pagina dove verrà visualizzato il FORM, preleviamo il codice e salviamolo in un file di testo index.php (per comodità si consiglia di posizionare tutti i file creati all’interno della stessa directory nella root del web server) :

";
echo "";

// genero un identificativo criptato md5 da associare al codice di sicurezza
$captcha_id = md5(microtime().mt_rand().'super1segreto2segretissimo3');

// creo un codice di controllo per la verifica dell'identificativo
$sale = "frase super segreta da cambiare a discrezione.";

// cripto in md5 i due codici generati
$chk = md5($sale.$captcha_id);

echo "";
echo "";

//Creo il form

echo "";
echo "Cognome : ";
echo "
";
echo "Nome : ";
echo "
";
echo "E-mail : ";
echo "
";
echo "";
echo "";
echo "
";
echo "";
echo "
";
echo "";
echo "
";
echo "";

echo "";
?>

Notare bene che nello script precedente:

l’immagine Captcha è stata generata dalla richiesta presente nell’attributo src dell’immagine
il campo captcha_code conterrà il codice di sicurezza che l’utente dovrà inserire per validare l’elaborazione
il campo captcha_id contiene il captcha_id generato precedentemente nella head
Ecco il listato della pagina che genera l’immagine CAPTCHA, salviamo il codice in un file di testo avendo l’accortezza di salvarlo come captcha.php :

Da notare che nello script precedente si utilizza un font per generare l’immagine (VeraMono.ttf) il quale può essere modificato a proprio piacimento con un qualsiasi font installato nel proprio pc o scaricato da internet. Per scaricare il font utilizzato nell’esempio cliccare qui. Nell’esempio il font in questione è posizionato all’interno della stessa cartella dove sono stati posizionati gli script.

Passiamo ora ad esaminare la pagina che invierà l’ e-mail e che si occuperà anche di verificare la validità dell’elaborazione, copiamo il codice sottostante e incolliamolo su un file di testo avendo l’accortezza di salvarlo come email.php.

 (UNIX_TIMESTAMP() - $durata_captcha)") or die (mysql_error());
if(mysql_num_rows($res) != 1){
// verifica fallita
echo '$captcha_code errato';
}else{
// cancello i vecchi codici e quello corrente
mysql_query("DELETE FROM captcha WHERE captcha_id = '$captcha_id' OR `timestamp` < (UNIX_TIMESTAMP() - $durata_captcha)");

//Scrittura parametri email
$from_name  = $name." ".$surname;
$from_email = $mail;
$to_name    = "NOME_DEL_DESTINATARIO";
$to_email   = "MAIL_DEL_DESTINATARIO";
$subject    = "Invio email sicura dal tuo sito";
$text_message = "This is HTML email and your email client software ain't support HTML email.";
$html_message = "\n";
$html_message.= "\n";
$html_message.= "\n";
$html_message.= "\n";
$html_message.= "";
$html_message.= "Ciao, questa è un email sicura inviata dal tuo sito";
$html_message.= "";

//Creo l'allegato
$attachment = array ("PATH_ALLEGATO_SUL_SERVER");

//Invio l'email con la funzione sendmail
sendmail ($from_name, $from_email, $to_name, $to_email, $subject, $text_message, $html_message, $attachment);

echo "";
}
}
}
?>

I controlli effettuati all’inizio del codice illustrato permettono al server web di distinguere se si tratta di una richiesta valida o di una richiesta effettuata da un BOT.

Se i controlli saranno superati si passerà ad invocare la funzione sendmail che si occuperà dell’invio di una mail in formato HTML con allegati. Alternativamente a questa funzione si pùo invocare la classica funzione mail disponibile nel linguaggio PHP.

Ecco ora il listato della funzione sendmail invocata nel precedente script, che si occupa di inviare una mail in formato HTML. Copiare il codice e salvarlo in un file denominato send_mail.php.

";
$to   = "$to_name <$to_email>";
$main_boundary = "----=_NextPart_".md5(rand());
$text_boundary = "----=_NextPart_".md5(rand());
$html_boundary = "----=_NextPart_".md5(rand());
$headers  = "From: $from\n";
$headers .= "Reply-To: $from\n";
$headers .= "X-Mailer: Hermawan Haryanto (http://hermawan.com)\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: multipart/mixed;\n\tboundary=\"$main_boundary\"\n";
$message .= "\n--$main_boundary\n";
$message .= "Content-Type: multipart/alternative;\n\tboundary=\"$text_boundary\"\n";
$message .= "\n--$text_boundary\n";
$message .= "Content-Type: text/plain; charset=\"ISO-8859-1\"\n";
$message .= "Content-Transfer-Encoding: 7bit\n\n";
$message .= ($text_message!="")?"$text_message":"Text portion of HTML Email";
$message .= "\n--$text_boundary\n";
$message .= "Content-Type: multipart/related;\n\tboundary=\"$html_boundary\"\n";
$message .= "\n--$html_boundary\n";
$message .= "Content-Type: text/html; charset=\"ISO-8859-1\"\n";
$message .= "Content-Transfer-Encoding: quoted-printable\n\n";
$message .= str_replace ("=", "=3D", $html_message)."\n";
if (isset ($attachment) && $attachment != "" && count ($attachment) >= 1){
for ($i=0; $i

A questo punto possiamo testare lo script chiamando la pagina index.php dal nostro browser.

Alla prossima…