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