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.