Populating HTML

dev
1

OK, I can retrieve data from mySQL database and I can use HTML to create a table structure but I’m having difficulty finding examples for how to populate the HTML with the data I’ve retrieved from my database.

2

<cfoutput query="q" encodeFor="html"> <tr> <td> #q.name# </td></tr></cfoutput>

3

Since you’re new to Lucee/CFML… here are a couple of sites that might interest you:

learncfinaweek.com

which is an excellent resource for learning all the basics of the CFML language.

which is an excellent resource for tags/functions/guides and compatibility with other CF engines.

Which has a fair amount of Lucee specific stuff as well as CFML in general

HTH

– Denny

4

Thank you Zackster & ddspringle, it all helps. My fairly extensive experience with Adobe ColdFusion involved the use of Flash and ActionScript2. Though the structures are similar, that experience doesn’t easily covert to Lucee and CFML though I am slowly getting the hang of it.

1 Like
5

Been reading lots of books about html and browsing the web and I can produce a table and populate it with data from my database except that for every record I retrieve, I get a new table. Annoyingly, there are numerous examples on the web but almost all use PHP or JavaScript.

6

Move the table tags out of the loop.

<table>
<cfoutput query="q" encodeFor="html">
  <tr> <td> #q.name# </td></tr>
</cfoutput>
</table>
7

bdw429s: There is no explicit loop.

 <head>
   <cfscript>
	query name="qry" 
{
	echo("select progname, userid, datestamp, timestampx from tbllocks");
}
	</cfscript> 
</head>
    <body> 
        <table border="2" bgcolor="66FFFF" class="box">
            <h1>This will show all current DPIMS Users</h1>
            <thead>
            <tr>
            	<th scope="col">Program</th>
                <th scope="col">User</th>
            	<th scope="col">Date</th>
            	<th scope="col">Time</th>          
            </tr>
            </thead>
            <tbody>
            <cfoutput query = "qry">
            <tr>
                <td>#qry.progname#</td>
                <td>#qry.userid#</td>
                <td>#qry.datestamp#</td>
                <td>#qry.timestampx#</td>
            </tr>
            </cfoutput>
            </tbody>
        </table>
    </body>
8

<cfoutput query=""> means loop over the the query, whilst evaluating (and outputting) anything wrapped in #hashes#

9

Zackster, ok but why does it create a new table for every retrieved record?

10

OK, if I don’t have the CSS entries, each row has a border around it as does each column.

11

By the way, you don’t need to put the query in the head section either, as it doesn’t output anything.

I would recommend doing all the cfml preparation work before outputting html

<!--- any cfml  like the query etc--->
<!--- then purge any whitespace from the cfml code (or you can use <cfsilent>  --->
<cfcontent reset="yes">
<html>
  <head>
    <title> etc </title>
  </head>
<body>
  etc 
  <cfoutput query="qry">
   etc
  </cfoutput>
</body>
</html>
12

This is more a procedural thing I think…when I’m creating a web page, I have my editor (dreamweaver) open at my html and css files and I have my browser (Chrome) open displaying the web page. When I make a change to either the css or html, I save the file and then click “reload this page” on the browser to see the effect of my change. It doesn’t always show the change but if I pop up firefox and go to my webpage, it shows the change. How to force Chrome to show the changes?

13

ok, ok…hold down control and click reload.

14

try and use the browser’s dev tools, network panel to see what the browser is doing with the request