Getting data to our edit page

The current page looks similar to the page where we put the form. To get the data from our database onto the page, we need to do a few things here. First, let us change the action of the form tag to product_edit.cfm. We can modify the processing section of the page first, which will make things simpler. Add the following code to your product_edit.cfm page:

<!--- Processing --->
<cfparam name="url.id" default="0">
<cfscript>
objProduct = createObject("component","product").init(dsn="cfb");
objProduct.load(url.id);
</cfscript>

We need the default value set so that we do not receive an error message if the page is called without an id. After we set our default, we will see that we have created an object from our CFC object class. This time, we are passing the Data Source Name dsn into the object through the constructor method. This makes our code more portable, and ready for reuse. Once we have an instance, we set the current record using the load method and passing the id of the data record to the method. Let us look at the minor changes that we will make to the content section. We will add the values of the object's protected attributes.

<!--- Content --->
<cfoutput> 
<form action="product_edit.cfm" method="post">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" id="idName" value="#objProduct.get('name')#" /> 
</td>
</tr>
<tr>
<td>Description:</td>
<td>
<textArea name="description" id="idDescription"> #objProduct.get('description')#</textArea> 
</td>
</tr>
<tr>
<td>Price:</td>
<td>
<input type="text" name="price" id="idPrice" value="#objProduct.get('price')#" /> 
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="submit" value="submit" /> 
</td>
</tr>
</table>
</form>
</cfoutput> 

Now, we will refresh the form and see how the results differ:

Doesn't this look better? We can go back to the list page and retrieve an existing product from the edit form.

If we submit back the same form, browsers tend to empty out the form. It should not do that, but the form is not posting the ID of the record back to the server. This can lead to a problem because, if we do not send the ID of the record back, the database will have no idea as to which record's details should be changed. Let us solve these issues first, and then we will learn to use a new tag called the<cfinclude> tag along the way.

The first problem that we are going to solve is where we are calling the page with the ID value in the URL structure; then, if we post the page we will be calling the page with the ID in the form structure. We are going to use a technique that has been widely used for years in the ColdFusion community. We are going to combine the two scopes into a new common structure. We will create a structure called attributes. First we will check if it exists. If it does not, then we will create the structure. After that, we will merge the URL structure, and then the FORM structure into the attributes structure. We will put that code in a common page called request_attributes.cfm, so we can include it on any page we want, reusing the code. Do remember that the form and URL scope always exist.

<!--- request_attributes.cfm --->
<cfscript>
if(NOT isDefined("attributes"))
{
attributes = structNew();
}
structAppend(attributes,url);
structAppend(attributes,form);
</cfscript>

Let us modify our edit page in order to take care of a couple of issues. We need to include the script that we have just created. We will modify the processing section of our edit page as highlighted here:

<!--- Processing --->
<cfinclude template="request_attributes.cfm"> <cfparam name="attributes.id" default="0"> 
<cfscript>
objProduct = createObject("component","product").init(dsn="cfb");
objProduct.load(attributes.id); 
</cfscript>

There is only one more thing we need now: We need our form to store the id value of the record that is being managed. We could just put it in a textbox like the other fields, but the user does not need to know that information. Let us use a hidden input field and add it after our form tag:

<!--- Content --->
<cfoutput>
<form action="product_edit.cfm" method="post">
<input type="hidden" name="id" value="#objProduct.get('id')#"> 

Refresh the screen, and it will work when we use the form, or when we choose an item from the product list page. We have now created our edit/add page.