This tutorial will show you how to use arrays to properly display your database information

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......

About This Tutorial
Author: Pablo Varando
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5
Total Views: 153,882
Submission Date: October 28, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 47
Discuss This Tutorial
Advertisement

Sponsored By...
$39.00 - 50 Minute Deep Tissue Massage Dripping Springs, Texas!