Volendo mostrare anche gli altri dati contenuti nella tabella ALBUM, come la descrizione o un'immagine, possiamo creare una nuova pagina chiamata "di dettaglio". Prima di tutto, occorre notare che la colonna ID_ALBUM è di tipo "contatore", cioè un identificativo univoco che rappresenta nel database uno e un solo record della tabella ALBUM. Si utilizza solitamente questo tipo di valore per "filtrare" il record che si deve visualizzare in una pagina di dettaglio.
1. Aggiungi il campo ID_ALBUM nel SELECT del file index.cfm:
......
<!--- Esegue una query al datasource "discoteca" chiamata "getAlbum" --->.
<cfquery datasource="discoteca" name="getAlbum">
SELECT ID_ALBUM, ALBUM_TITOLO, ALBUM_AUTORE, ALBUM_GENERE
FROM ALBUM
</cfquery>
......
2. Aggiungi un link al titolo dell'album. Ipotizzando che la pagina di dettaglio si chiamerà "dettaglio.cfm", ad essa dovremo passare il valore di ID_ALBUM da usare come filtro. Nel link facciamo quindi seguire, al nome del file dettaglio.cfm, un punto di domanda ("?"), un nome di variabile di nostra scelta e il valore univoco:
......
<cfoutput query="getAlbum">
<!--- Una riga della tabella per ogni record della query GetAlbum --->.
<tr>
<td><p>#ALBUM_GENERE#</p></td>
<td><p><a href="dettaglio.cfm?id=#ID_ALBUM#">#ALBUM_TITOLO#</a></p></td>
<td><p>#ALBUM_AUTORE#</p></td>
</tr>
</cfoutput>
......
3. Salva ora un nuovo file dettaglio.cfm nella cartella del sito contenente una query e i due soliti <cfinclude>:
<!--- Esegue una query al datasource "discoteca" chiamata "getdettaglio" --->.
<cfquery datasource="discoteca" name="getdettaglio">
SELECT *
FROM ALBUM
WHERE ID_ALBUM = #URL.id#
</cfquery>
<!--- Include l'intestazione del sito --->.
<cfinclude template="header.cfm">
<!--- Include il piede delle pagine --->.
<cfinclude template="footer.cfm">
La query "getdettaglio" esegue un SELECT nella tabella ALBUM, filtrando i dati in base ad un ID_ALBUM contenuto in una variabile CFML chiamata "URL.id". Lo scope URL indica una variabile proveniente dall'URL della pagina (esattamente come lo scope "form" indicava la provenienza da un form): in questo caso, è l'URL creato dinamicamente dalla riga <a href="dettaglio.cfm?id=#ID_ALBUM#">#ALBUM_TITOLO#</a> nella pagina index.cfm.
4. Aggiungi il codice per visualizzare il contenuto della query "Getdettaglio". Analogamente a prima, utilizziamo i nomi dei campi del database per estrarre i singoli valori all'interno di un tag <cfoutput> con l'attributo "query".
<!--- Esegue una query al datasource "discoteca" chiamata "getdettaglio" --->.
<cfquery datasource="discoteca" name="getdettaglio">
SELECT *
FROM ALBUM
WHERE ID_ALBUM = #URL.id#
</cfquery>
<!--- Include l'intestazione del sito --->.
<cfinclude template="header.cfm">
<cfoutput query="getdettaglio">
<p>
<b>Titolo: </b> #ALBUM_TITOLO#<br>
<b>Autore: </b> #ALBUM_AUTORE#<br>
<b>Etichetta: </b> #ALBUM_ETICH#<br>
<b>Descrizione: </b> #ALBUM_DESCR#<br>
<b>Genere: </b> #ALBUM_GENERE#<br>
<b>Immagine: </b> #ALBUM_IMG#
</p>
</cfoutput>
<!--- Include il piede delle pagine --->.
<cfinclude template="footer.cfm">
Naviga da "http://localhost:8500/discoteca/index.cfm" all'interno dei link creati sui titoli dei CD. Nota come, nell'URL, cambia la variabile "id" - che proviene dal campo ID_ALBUM.
Alcuni record possiedono nel campo ALBUM_IMG il nome del file che contiene la copertina dell'album. Le immagini che ho utilizzato le puoi scaricare da qui: estrai i file nella cartella "discoteca", le immagini devono stare nella sottocartella "album".
5. Inserisci quindi nel file dettaglio.cfm il codice HTML per mostrare l'immagine, il cui nome proviene dal database:
......
<cfoutput query="getdettaglio">
<p>
<b>Titolo: </b> #ALBUM_TITOLO#<br>
<b>Autore: </b> #ALBUM_AUTORE#<br>
<b>Etichetta: </b> #ALBUM_ETICH#<br>
<b>Descrizione: </b> #ALBUM_DESCR#<br>
<b>Genere: </b> #ALBUM_GENERE#<br>
<b>Immagine: </b> <img src="album/#ALBUM_IMG#">
</p>
</cfoutput>
......
6. Poiché non tutti i record possiedono un'immagine, inserisci un <cfif> che controlli che il campo non sia vuoto:
......
<cfoutput query="getdettaglio">
<p>
<b>Titolo: </b> #ALBUM_TITOLO#<br>
<b>Autore: </b> #ALBUM_AUTORE#<br>
<b>Etichetta: </b> #ALBUM_ETICH#<br>
<b>Descrizione: </b> #ALBUM_DESCR#<br>
<b>Genere: </b> #ALBUM_GENERE#<br>
<!--- Mostra l'immagine solo se il campo ALBUM_IMG non è vuoto --->.
<cfif ALBUM_IMG NEQ "">
<b>Immagine: </b> <img src="album/#ALBUM_IMG#">
</cfif>
</p>
</cfoutput>
......
Non ci rimane altro da fare che personalizzare la pagina usando un po' di HTML, ad esempio in questo modo:
<!--- dettaglio.cfm: mostra il dettaglio dell'album --->.
<!--- Esegue una query al datasource "discoteca" chiamata "getdettaglio" --->.
<cfquery datasource="discoteca" name="getdettaglio">
SELECT *
FROM ALBUM
WHERE ID_ALBUM = #URL.id#
</cfquery>
<!--- Include l'intestazione del sito --->.
<cfinclude template="header.cfm">
<p><a href="index.cfm">Torna all'elenco</a></p>
<cfoutput query="getdettaglio">
<p class="titolo">#ALBUM_AUTORE# ~ #ALBUM_TITOLO#</p>
<p>
<table >
<tr>
<td valign="top">
<cfif ALBUM_IMG NEQ "">
<img src="album/#ALBUM_IMG#" border="1">
</cfif>
</td>
<td valign="top">
<p>
<b>Etichetta: </b> #ALBUM_ETICH#<br>
<b>Descrizione: </b> #ALBUM_DESCR#<br><br>
<b>Genere: </b> #ALBUM_GENERE#
</p>
</tr>
</table>
</p>
</cfoutput>
<!--- Include il piede delle pagine --->.
<cfinclude template="footer.cfm">
e la nostra pagina di dettaglio assume un aspetto assai più presentabile.
I file del sito aggiornati fino a questo capitolo li puoi scaricare da qui.