Il progetto che svilupperemo, e che ci permetterà di esplorare un po' tutte le principali caratteristiche del CFML, è un sito collegato ad un database che mostra l'elenco dei CD audio di una nostra ipotetica discoteca. Ho preparato la base di un'interfaccia grafica che adotteremo in tutte le pagine, comprendente un foglio di stile CSS, una gif per uno sfondo e, per ora, un semplice file HTML come base della nostra homepage. Puoi subito scaricare questi file.
Estrai il contenuto dello ZIP in una nuova cartella chiamata "discoteca" all'interno di C:CFusionMXwwwroot, dove C:CFusionMX è il percorso che hai specificato durante l'installazione di ColdFusion. Accedendo con il browser all'indirizzo "http://localhost:8500/discoteca/index.htm" potrai visualizzare la homepage.
Apri con il tuo editor di codice preferito (ad esempio Dreamweaver MX) il file index.htm: come puoi vedere, si tratta di semplice HTML. Poiché il nostro sito web avrà comune, in tutte le pagine, l'intestazione con il titolo e il piede della pagina, è utile inserire queste due parti in due file separati che richiameremo in ogni pagina del sito.
1. Crea un nuovo file con nome header.cfm all'interno della cartella "discoteca" e copia/incolla, dentro questo file, il codice che crea l'intestazione della pagina index.htm:
<!--- header.cfm: contiene le dichiarazioni iniziali della pagina HTML e il titolo del sito --->
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN">
<html>
<head>
<title>La mia discoteca online</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="intestazione">
<tr>
<td>La mia discoteca online</td>
</tr>
</table>
2. Analogamente, crea un nuovo file footer.cfm e incolla il codice per creare il piede della pagina:
<!--- footer.cfm: contiene le dichiarazioni finali della pagina HTML e il piede delle pagine --->
<hr>
<div class="corpoPagina">
<span class="piede">Esempio di <strong>pie' di pagina</strong></span>
</div>
</body>
</html>
3. Crea un nuovo file chiamato index.cfm e salvalo nella stessa cartella. Copia/incolla il codice seguente in questo file:
<!--- index.cfm: visualizza l'homepage del sito --->
<cfinclude template="header.cfm">
<cfinclude template="footer.cfm">
4. Apri ora il browser alla pagina "http://localhost:8500/discoteca/index.cfm".
Come puoi vedere, richiamando il file index.cfm il browser visualizza una pagina in HTML che mostra il contenuto dei due file header.cfm e footer.cfm. Il server di ColdFusion ha elaborato il file index.cfm. L'estensione .cfm dei file indica al web server che si tratta di una pagina CFML che dovrà essere interpretata. Infatti, il file index.cfm che abbiamo creato contiene due tag CFINCLUDE. Si tratta di un tag in CFML che indica a ColdFusion di richiamare il file specificato dall'attributo "template".
Quest'operazione di "inclusione" di file è molto utile quando dobbiamo replicare del codice in più parti del nostro sito. Se provi ad esempio a cambiare il contenuto del file footer.cfm noterai che il cambiamento si riflette anche nella pagina index.cfm.
5. Apri il file footer.cfm.
6. Modifica il codice in questo modo:
<!--- footer.cfm: contiene le dichiarazioni finali della pagina HTML e il piede delle pagine --->
<hr>
<div class="corpoPagina">
<cfset Oggi = Now()>
<span class="piede">
<cfoutput>
Oggi è il <strong>#Oggi#</strong>
</cfoutput>
</span>
</div>
</body>
</html>
7. Aggiorna la pagina "http://localhost:8500/discoteca/index.cfm" nel tuo browser. Apparirà la data e l'ora.
Le istruzioni CFML che abbiamo inserito sono molto semplici. Attraverso il tag <cfset> abbiamo creato una nuova variabile chiamata "Oggi" il cui valore corrisponde al risultato della funzione Now(). Questa funzione restituisce semplicemente la data e l'ora di "adesso".
Successivamente, tramite il tag <cfoutput>...</cfoutput> abbiamo detto a ColdFusion di mostrare il contenuto della variabile, richiamandola con l'apposita notazione tra due cancelletti. Nota che inserire #Oggi# fuori dal tag <cfoutput> non visualizza il contenuto della variabile.
La data e l'ora hanno un formato poco leggibile, ma possiamo personalizzarlo a dovere utilizzando la funzione DateFormat().
8. Modifica il file footer.cfm come segue per dare una formattazione alla data contenuta in "Oggi":
<!--- footer.cfm: contiene le dichiarazioni finali della pagina HTML e il piede delle pagine --->
<hr>
<div class="corpoPagina">
<cfset Oggi = Now()>
<span class="piede">
<cfoutput>
Oggi è il <strong>#DateFormat(Oggi)#</strong>
</cfoutput>
</span>
</div>
</body>
</html>
La funzione DateFormat() richiede un valore data come argomento: quando si richiama una variabile all'interno di funzioni ColdFusion, non è necessario inserire queste ultime tra i cancelletti.
Abbiamo inoltre aggiunto nelle prime righe di ciascun file dei commenti in CFML: i commenti vengono inseriti tra <!--- e --->, come si fa con l'HTML, con la differenza che i trattini sono tre anziché due. Il contenuto dei commenti CFML non viene elaborato dal server e, naturalmente, non viene visualizzato nelle pagine online.
La pagina "http://localhost:8500/discoteca/index.cfm" ora mostra una data in un formato "breve" e in inglese. Per dire a ColdFusion di mostrare la data in lingua italiana, dobbiamo impostare una variabile utilizzando la funzione SetLocale(). Per formattare la data nella lingua impostata da SetLocale() usiamo la funzione LSDateFormat() anziché DateFormat() - dove "LS" sta per "localset". Entrambe le funzioni possono ricevere un secondo argomento, rappresentato da una "maschera" che indica il formato specifico della data visualizzata.
9. Modifica footer.cfm aggiungendo il SetLocale impostato sulla lingua italiana e utilizza la funzione LSNumberFormat():
<!--- footer.cfm: contiene le dichiarazioni finali della pagina HTML e il piede delle pagine --->
<cfset Locale = SetLocale("Italian (Standard)")>
<hr>
<div class="corpoPagina">
<cfset Oggi = Now()>
<span class="piede">
<cfoutput>
Oggi è <strong>#LSDateFormat(Oggi, 'dddd, d mmmm yyyy')#</strong>
</cfoutput>
</span>
</div>
</body>
</html>
La maschera "dddd, d mmmm yyyy" segue un particolare schema di caratteri. Nella reference di ColdFusion puoi trovare maggiori dettagli sull'uso delle maschere nella funzione LSDateFormat.
SetLocale("Italian (Standard)") imposta il formato italiano per le date ma anche per i numeri. Poiché, presumibilmente, tutto il nostro sito mostrerà date e numeri in italiano, spostiamolo dal file footer.cfm nel file header.cfm, così l'impostazione sarà valida in qualsiasi pagina che richiama header.cfm.
10. Modifica header.cfm in questo modo:
<!--- header.cfm: contiene le dichiarazioni iniziali della pagina HTML e il titolo del sito --->
<!--- Imposta l'italiano come lingua predefinita --->
<cfset Locale = SetLocale("Italian (Standard)")>
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN">
<html>
<head>
<title>La mia discoteca online</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="intestazione">
<tr>
<td>La mia discoteca online</td>
</tr>
</table>
11. ed elimina la riga SetLocale() dal file footer.cfm:
<!--- footer.cfm: contiene le dichiarazioni finali della pagina HTML e il piede delle pagine --->
<hr>
<div class="corpoPagina">
<cfset Oggi = Now()>
<span class="piede">
<cfoutput>
Oggi è <strong>#LSDateFormat(Oggi, 'dddd, d mmmm yyyy')#</strong>
</cfoutput>
</span>
</div>
</body>
</html>
Naviga con il browser alla pagina "http://localhost:8500/discoteca/index.cfm" per fare un test.
