HostMySite.Com is sponsoring this tutorial, please visit their site today!

Using Arrays in ColdFusion To Properly Display Data.... by: Pablo Varando

[Download in PDF Format] [Download in FlashPaper Format]

This tutorial will show you how to use arrays to properly display your database information. In this example we will be creating a image gallery. It will populate a "10" item array and display the data in two rows with 5 items site by side.

The first thing you must do is to query your database for all the gallery items. 
NOTE: I used [maxrows="10"] in the query, but you will want to remove it when it goes live and integrate the previous/next tutorial.

<!--- get all your images from the database --->
<cfquery name="qGetGallery" datasource="MyDSN" maxrows="10">
   SELECT ImageTitle, ImagePath
   FROM Gallery
   ORDER BY ImageType
</cfquery>

Next you simply create the array that will hold the data from the database.

<!--- Create an array of all gallery items --->
<cfset gallery = ArrayNew(2)>

Now here's a trick I've learned the hard way.. start by populating all ten arrays with a value of "0". Later on we will check to see if the current array has a value of "0". If it does we will know that there is no value and simply not display it.

<!--- Now populate the array with all "0" --->
<!--- this is to catch empty arrays later --->
<cfloop from="1" to="10" index="idx">
   <cfset gallery[idx][1] = "0">
   <cfset gallery[idx][2] = "0">
</cfloop>

Next, let's populate the arrays with the actual data from the database.

<!--- Now let's populate the array with data --->
<cfoutput query="qGetGallery">
   <cfset gallery[currentrow][1] = "#qGetGallery.ImageTitle#">
   <cfset gallery[currentrow][2] = "#qGetGallery.ImagePath#">
</cfoutput>

Here we will actually display the data to the end-user and we will check to make sure that the arrays do not have a value of "0"

<!--- Now display the array values --->
<cfif gallery[1][1] neq "0">
   <!--- Display the gallery items --->
   <cfoutput>
   <table width="600" align="center" border="0">
     <tr>
         <td width="20%" align="center">
         <!--- Displays the first gallery item --->
         <img src="#gallery[1][2]#" border="0" alt=" Image "><BR>
         #gallery[1][1]#
         </td>
         <td width="20%" align="center">
         <!--- Displays the second gallery item --->
         <cfif gallery[2][1] neq 0>
             <img src="#gallery[2][1]#" border="0" alt=" Image "><BR>
             #gallery[2][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the third gallery item --->
         <cfif gallery[3][1] neq 0>
            <img src="#gallery[3][1]#" border="0" alt=" Image "><BR>
            #gallery[3][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the fourth gallery item --->
         <cfif gallery[4][1] neq 0>
             <img src="#gallery[4][1]#" border="0" alt=" Image "><BR>
             #gallery[4][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the fifth gallery item --->
         <cfif gallery[5][1] neq 0>
             <img src="#gallery[5][1]#" border="0" alt=" Image "><BR>
             #gallery[5][1]#
         </cfif>
         </td>
     </tr>
     <tr>
         <td width="20%" align="center">
         <!--- Displays the sixth gallery item --->
         <cfif gallery[6][1] neq 0>
              <img src="#gallery[6][1]#" border="0" alt=" Image "><BR>
              #gallery[6][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the sevent gallery item --->
         <cfif gallery[7][1] neq 0>
             <img src="#gallery[7][1]#" border="0" alt=" Image "><BR>
             #gallery[7][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the eight gallery item --->
         <cfif gallery[8][1] neq 0>
            <img src="#gallery[8][1]#" border="0" alt=" Image "><BR>
            #gallery[8][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the ninth gallery item --->
         <cfif gallery[9][1] neq 0>
             <img src="#gallery[9][1]#" border="0" alt=" Image "><BR>
             #gallery[9][1]#
         </cfif>
         </td>
         <td width="20%" align="center">
         <!--- Displays the tenth gallery item --->
         <cfif gallery[10][1] neq 0>
             <img src="#gallery[10][1]#" border="0" alt=" Image "><BR>
             #gallery[10][1]#
         </cfif>
         </td>
     </tr>
  </table>
  </cfoutput>
<cfelse>
  <!--- There is no data to display, no results found --->
  <font size="2" face="Verdana" color="red">We're sorry, no items were found!</font>
</cfif>

Questions? Comments? Email Me......

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: