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.