Download the EasyCFM.COM Browser Toolbar!
Part 5: Understanding and Using CFCs (with OOP and database interaction)
Untitled Document

Understanding and Using CFCs (with OOP and database interaction)

Part 5

Creating our job listings page

Now that we've created a function to search for jobs in our database, and return them as job components themselves, we are ready to create a job listings page.

This page will list out all of the current jobs in the database in a simple table. Again, formatting has intentionally been limited to focus on the ColdFusion code.

Below is the skelleton we will fill, we will call this page jobs.cfm.

<html><head><title>Jobs</title></head>
<body>

<table width="500" border="1" cellspacing="0">
     <tr>
          <th>
job id</th>
          <th>
job name</th>
          <th>
edit</th>
     </tr>

     <tr>
          <td>
id</td>
          <td>
name</td>
          <td>
[edit]</td>
     </tr>

</table>
</body>
</html>

Searching the jobs

Since we are wanting to list all the current jobs we have stored, the first step is to search for them. We can of course do this by creating a job component, and then utilizing the searchJobs() function we created earlier.

<cfscript>
     // create a new job component to do our searching for us
     search = createObject("component", "job");
     // now assign our results (an array) to a new variable called results.
     results = search.searchJobs();
</cfscript>

What we have done is first created an instance of the job componet named search. We will then use this components function searchJobs() to get our matching jobs and return them into a variable.

Now we have an array of job components from our data in the database.

Showing the results

Now that we have our results, we simply need to display them to the screen. To do this, we will loop over the contents of the array and output the information stored in the data properties!

Below is the jobs.cfm code so far.

<html><head><title>Jobs</title></head>
<body>

<cfscript>
     // create a new job component to do our searching for us
     search = createObject("component", "job");
     // now assign our results (an array) to a new variable called results.
     results = search.searchJobs();
</cfscript>
<table width="500" border="1" cellspacing="0">
     <tr>
          <th>
job id</th>
          <th>
job name</th>
          <th>
edit</th>
     </tr>

<cfoutput>
<cfloop from=
"1" to="#arrayLen(results)#" index="i">
     <tr>
          <td>
#results[i].id#</td>
          <td>
#results[i].name#</td>
          <td>
[edit]</td>
     </tr>

</cfloop>
</cfoutput>
</table>
</body>
</html>

Seeing is believing

When you run jobs.cfm, you will see output that is similar to the following (the actual data will differ of course):

job id job name edit
1028901 another test job [edit]
1028911 My test job [edit]
1028900 Nates Test Job [edit]
1028908 test [edit]
1028902 testing job [edit]

Speedy code is happy code

Although we are creating a component for every record, and doing so inside yet another instance of the component, our code is very fast! CFCs are compiled java byte code and so the execute extremely fast.

Two quick changes for completion

We're going to add three links to link this page into the create screen, and the update screen we are about to create. One before our job listing table, one on the "[edit]" line, and one on our job id, to link into our tasks.

<html><head><title>Jobs</title></head>
<body>

<cfscript>
     // create a new job component to do our searching for us
     search = createObject("component", "job");
     // now assign our results (an array) to a new variable called results.
     results = search.searchJobs();
</cfscript>
<a href="job_create.cfm">[create a new job]</a><br>
<table width="500" border="1" cellspacing="0">
     <tr>
          <th>
job id</th>
          <th>
job name</th>
          <th>
edit</th>
     </tr>

<cfoutput>
<cfloop from=
"1" to="#arrayLen(results)#" index="i">
     <tr>
          <td><a href="tasks.cfm?id=#results[i].id#">
#results[i].id#</a></td>
          <td>
#results[i].name#</td>
          <td><a href="job_edit.cfm?id=#results[i].id#">
[edit]</a></td>
     </tr>

</cfloop>
</cfoutput>
</table>
</body>
</html>

Lets also change our job_create_action.cfm to include a <cflocation> back to our jobs listings page. Add the following line to the bottom of the page:

<!--- return the user to the job listings page --->
<cflocation url="jobs.cfm" addtoken="no">

In the next part of this series, we will create a function to edit/update our job data.

All ColdFusion Tutorials By Author: Nate Nielsen