Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 16 di 39
  • livello principiante
Indice lezioni

La Pagina di dettaglio

Come visualizzare nuove informazioni su una specifica informazione
Come visualizzare nuove informazioni su una specifica informazione
Link copiato negli appunti

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.

Ti consigliamo anche