Data drill-down is een populaire vorm van gebruikersinterface in webapplicaties. Het maakt het mogelijk vanuit algemene gegevens steeds dieper op informatie ‘in te zoomen’.

• een zoekscherm,
• een resultaatscherm
• en een detail-scherm.
  

Het detailscherm toont uiteindelijk alle details van het item waarover men informatie wenst.
Maar hoe kun je ook jpg en gif plaatjes 'dynamisch' maken.

In dit artikel gaan we iets dieper in op dit detail-scherm en met name op de manier waarop u - afhankelijk van de zoekvraag - niet alleen tekst op uw scherm krijgt maar ook de bijbehorende images kunt laten zien.

Uitgangspunt is een dril-down pagina die we in het project GamesOnline hebben gebruikt (Hoofdstuk 7, pagina 138), maar het principe kan natuurlijk makkelijk ook in andere situaties toegepast worden.
De bedoeling is dat op de uiteindelijke detailpagina niet alleen de gegevens van de games (in tekstvorm) verschijnen maar ook een .jpg (of .gif of ...) image van het spel...

Binaire gegevens, zoals images, kunnen niet op een eenvoudige manier opgeslagen worden in een database. Hoe kunt u er dan toch voor zorgen, dat een image gekoppeld wordt aan een tabelrij?

De oplossing is om de image op te slaan in een directory onder een naam, die overeenkomt met de primaire sleutel van het record (of een ander voor dat record uniek gegeven).

Als voorbeeld nemen we de tabel tblGames uit GamesOnline.mdb met de volgende gegevens:

Indien de gebruiker zoekt naar detailgegevens van het spel Neverwinter Nights dan zal de SQL Query op de detailpagina er ongeveer zo uitzien:

<CFQUERY NAME = "games_overzicht" DATASOURCE = "GamesOnline">
   SELECT GameId, Titel, Categorie, Uitgever, Beschrijving
   FROM tblGames
   WHERE GameId=1
</CFQUERY>

Om de gegevens op het scherm te krijgen zou de rest van de code van de detailpagina er aldus uit kunnen zien:

<CFOUTPUT QUERY = "games_overzicht">
    <IMG SRC = “../images/img#GameID#.jpg” ALT=”#Titel#”>
    GameID: #GameID#
    Titel: #Titel#
    Categorie: #Categorie#
</CFOUPUT>

Het gaat ‘m hier natuurlijk om de coderegel met de <IMG> tag:

<IMG SRC = “../images/img#GameID#.jpg” ALT=”#Titel#”>

In de verwerkte pagina wordt dat - voor Neverwinter Nights -:

<IMG SRC = “../images/img1.jpg” ALT=”Neverwinter Nights”>

Wat hier gebeurt is duidelijk:
Met #GameID# wordt het werkelijke IDnummer van de game weergegeven. img#GameID#.jpg wordt dan: img1.jpg.
Door nu te zorgen dat u in de directory ../images een jpg-bestand heeft met de naam img1.jpg, wordt deze image keurig netjes, samen met de tekstuele gegevens van de Game op de pagina gezet...
Voor Age of Mythology zou dat natuurlijk img2.jpg worden, voor Baldur's Gate img3.jpg enz. enz.

Perfect! Geen speld tussen te krijgen (denkt u).
Maar wat wanneer er aan data geen imagebestand gelieerd is?
Het gevolg is een <IMG> tag die verwijst naar een niet bestaand plaatje en (dus) zo'n lelijk ‘missing image’ vak in uw browser veroorzaakt!

Om dat te voorkomen kunt u vooraf in CF een check uitvoeren, waarin gecontroleerd wordt of het bestand img1.jpg wel aanwezig is. Met de CF-tag FileExists() is dit te regelen.

Omdat FileExists() het volledige pad naar de image nodig heeft, moet u eerst dit volledige pad vaststellen. Dat doet u met twee eenvoudige regels code:

<CFSET images_src = “../images/img#GameID#.jpg”>
<CFSET image_path = ExpandPath(images_src)>

In <CFSET images_src = “../images/ img#GameID#.jpg”> wijst u de string “../images/ img#GameID#.jpg” toe aan de variabele image_src.
Met ExpandPath zet u het relatieve pad: ../images/img#GameID#.jpg om naar een absoluut pad: voor uw site zal dat misschien zoiets worden als: http://www.uwsite.nl/gamesonline/images/img1.jpg. Dit absolute pad wordt vervolgens weer opgeslagen in de variabele image_path.

Nu u het absolute pad heeft kunt u met FileExists() vooraf checken of het bestand op de webserver aanwezig is. FileExists() levert daarbij TRUE indien het bestand gevonden wordt en FALSE als het bestand niet gevonden wordt.
Tot slot is het dan alleen nog even een kwestie om de <IMG> tag in een CFIF-je te zetten:

<CFIF FileExists(image_path)>
    <!---Als het bestand bestaat, toon het--->
    <IMG SRC = “../images/img#GameID#.jpg” ALT=”#GamesTitel#”>
</CFIF>

M.a.w.: als het bestand bestaat wordt de image getoond.
Als het bestand niet bestaat (FileExists(image_path) is FALSE) dan wordt deze tag overgeslagen.
Geen lastige ‘missing images’ vakken meer, probleem opgelost!

Have fun!