<<

ORM

Hands On 20

By Simon Free (Bio)
gist

In this hands on example, you are going to update the front end of the web site to pull in the blog information you have entered through the admin.

Tags Used: <cfloop>, <cfoutput>, <cfparam>, <cfset>, <cfif>

Functions Used: EntityLoad, dateFormat, arrayLen, dateFormat, timeFormat, EntityNew, EntitySave

If you did not do the Data Handling homework you will have a difficulty following along. Copy the blog.cfm file from the /chapter6solution/ folder into your /www/ folder so you can proceed.

  1. Open up the /www/blog.cfm file in your code editor.
  2. First, pull all blog posts (in real life, you would only want to pull 10 or so entries per page). To pull all entries, call the EntityLoad function passing in the string 'blogPost' and assigning that to a blogPosts variable. Do this by replacing the <cfquery> block with the following line of code:
    <cfset blogPosts = EntityLoad('blogPost') />	
    
  3. Next, loop over the objects and output them. To do this, we will use a <cfloop> tag. Locate the <cfoutput> tag and replace it with the following line of code:
    <cfloop array="#blogPosts#" index="blogPost">	
    
  4. Replace the closing </cfoutput> tag with a closing </cfloop> tag, on or around line 39.
  5. Before proceeding, wrap the <cfloop> block with a <cfoutput> so that the data will be output to the screen.
  6. You now need to start replacing the placeholder information with the variables from the blogPost object. First, append the ID to the URL so that you can view the more detailed blog post later. Update the href attribute of the <a> tag and append #blogPost.id# to the link. The link should now read:
    blogpost.cfm?id=#blogpost.id#.
    
  7. Next, replace the myBlog.title variable with blogPost.title.
  8. Replace the myBlog.datePosted variable with blogPost.datePosted.
  9. Replace the myBlog.summary variable with blogPost.summary.
  10. The final step is to output the number of comments that the blog post contains. To do this, call the getComments() function on the blogPost object and use the arrayLen function to count how many entries were returned by replacing the number '12' with the following code:
    #arrayLen(blogPost.getComents())#
    
  11. Go to the /www/blog.cfm page in your browser and confirm that you now see all your blog posts listing on the page.
  12. Next, update the blog post detail page to display the relevant blog post information. Open up the /www/blogpost.cfm file in your code editor.
  13. At the top of the file, load in the blog post object and set it to a variable called blogPost using the following code:
    <cfset blogPost = EntityLoad('BlogPost',url.id,true) />	
    
  14. Then replace the placeholder content with the real content. Locate the <h2> tag and replace its content with #blogPost.title#.
  15. Replace the date with #dateformat(blogPost.dateposted,'mm/dd/yyyy')#.
  16. Replace the blog body placeholder text; this is the next five <p> tags. Delete these and replace them with #blogPost.body#.
  17. The last step is to put the blog post's ID value into the 'Export to PDF' link. Append the following code to the hef value of the <a> tag:
    #blogPost.id#
    
  18. Your code should look similar to this:
    <h2>
    	#blogPost.title#
    </h2>
    <p>
    	<strong>Date Posted</strong>: #dateformat(blogPost.datePosted,'mm/dd/yyyy')#
    </p>
    #blogPost.body#
    <p>
    	<a href="exportToPDF.html?id=#blogPost.id#" target=”_new”>Export to PDF</a>
    </p>
    <h3>
    	Comments (2)
    </h3>	
    
  19. You need to output how many comments the blog has, which is done by doing the same thing you have done previously by using the arrayLen function. Replace the number '2' with the following code:
    #arrayLen(blogPost.getComments())#	
    
  20. Now, loop over the comments and output them. To do this, use a <cfloop> tag. Just after the HTML comment tag, Start Comment, create a <cfloop> tag with the following attributes:
    • array: #blogPost.getComents()#
    • index: comment
  21. Place a closing </cfloop> tag before the HTML comment tag, End Comment and remove the other <li> tag.
  22. The comment object will now be available in the comment variable. Replace the date with the following code:
    #dateFormat(comment.createdDateTime,'mm/dd/yyyy')#	
    
  23. Replace the time with the following code:
    #timeformat(comment.createdDateTime,'short')#	
    
  24. Replace 'Simon Free' with the following code:
    #comment.author#	
    
  25. And finally, replace the placeholder text in the <p> tag with the following code:
    #comment.comment#	
    
  26. Your code should look similar to this:
    <ul>
    	<cfloop array="#blogPost.getComents()#" index="comment">
    	<li>
    		<p>
    			Posted On: #dateFormat(comment.createdDateTime,'mm/dd/yyyy')# at #timeformat(comment.createdDateTime,'short')# By #comment.author#
    		</p>
    		<p>
    			#comment.comment#
    		</p>
    		<div class="clr hline"> </div>
    	</li>
    	</cfloop>
    </ul>	
    
  27. Next, wrap the entire <div class="left> block in a <cfoutput> tag block. The opening <cfoutput> will start on or around line 25. The closing </cfoutput> should be placed on or around line 93.
  28. If you were to run this page now, you would see no comments as there are no comments in the system. The next step is to allow users to submit comments. Go to the top of the file and create a <cfparam> tag with the following attributes:
    • name: form.submitted
    • default: 0
  29. Next, add the logic to save the comment only if the form has been submitted. You can check if the form has been submitted by looking at the form.submitted value. After the <cfset> tag on or around line two, create a <cfif> tag, which checks if form.submitted is true. Your code should look similar to this:
    <cfparam name="form.submitted" default="0" />
    <cfset blogPost = EntityLoad('blogPost',url.id,true) />
    <cfif form.submitted>
    	
    </cfif>	
    
  30. Inside the <cfif> block, create a new instance of the blogComment entity and set the author and comment values from the form scope. Your code should look similar to this:
    <cfset comment = entityNew('blogComment') />
    <cfset comment.author = form.author />
    <cfset comment.comment = form.comment />	
    
  31. Next, set the createdDateTime value using the now() function and add the comment to the blogPost object. Your code should look similar to this:
    <cfset comment = entityNew('blogComment') />
    <cfset comment.author = form.author />
    <cfset comment.comment = form.comment />
    <cfset comment.createdDateTime = now() />
    <cfset blogPost.addComment(comment) />	
    
  32. Now that you have created the comment and added it to the blog post, you need to save these changes by calling entitySave on the blogPost object. Add the following line of code after your last <cfset> tag:
    <cfset EntitySave(blogPost) />	
    
  33. Your final code block should look similar to this:
    <cfif form.submitted>
    	<cfset comment = entityNew('blogComment') />
    	<cfset comment.author = form.author />
    	<cfset comment.comment = form.comment />
    	<cfset comment.createdDateTime = now() />
    	<cfset blogPost.addComment(comment) />
    	<cfset EntitySave(blogPost) />
    </cfif>		
    
  34. Locate the <form> tag on or around line 78 and append the following code to the action attribute:
    #blogPost.id#
    
  35. Open up the /www/blog.cfm page in your browser. Navigate to a blog post and enter a comment. You should now see your comment displayed in the comment section.