- Learn
- Guida Coldfusion Mx
- La Pagina di dettaglio
La Pagina di dettaglio
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 width=”500″>
<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.
Se vuoi aggiornamenti su La Pagina di dettaglio inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Aprirsi anche al no profit. #dilloalfuturo
Mi piacerebbe che Microsoft applicasse anche al mondo no profit le tecnologie che sta implementando