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.
- Open up the /www/blog.cfm file in your code editor.
-
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') /> -
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">
- Replace the closing </cfoutput> tag with a closing </cfloop> tag, on or around line 39.
<li>
Before proceeding, wrap the <span class="code"><cfloop></span> block with a <span class="code"><cfoutput></span> so that the data will be output to the screen.
</li>
<li>
You now need to start replacing the placeholder information with the variables from the <span class="code">blogPost</span> object. First, append the <span class="code">ID</span> to the <span class="code">URL</span> so that you can view the more detailed blog post later. Update the href attribute of the <span class="code"><a></span> tag and append <span class="code">#blogPost.id#</span> to the link. The link should now read:
blogpost.cfm?id=#blogpost.id#.
</li>
<li>
Next, replace the <span class="code">myBlog.title</span> variable with <span class="code">blogPost.title</span>.
</li>
<li>
Replace the <span class="code">myBlog.datePosted</span> variable with <span class="code">blogPost.datePosted</span>.
</li>
<li>
Replace the <span class="code">myBlog.summary</span> variable with <span class="code">blogPost.summary</span>.
</li>
<li>
The final step is to output the number of comments that the blog post contains. To do this, call the <span class="code">getComments()</span> function on the <span class="code">blogPost</span> object and use the <span class="code">arrayLen</span> function to count how many entries were returned by replacing the number '12' with the following code:
#arrayLen(blogPost.getComents())#
</li>
<li>
Go to the <span class="code">/www/blog.cfm</span> page in your browser and confirm that you now see all your blog posts listing on the page.
</li>
<li>
Next, update the blog post detail page to display the relevant blog post information. Open up the <span class="code">/www/blogpost.cfm</span> file in your code editor.
</li>
<li>
At the top of the file, load in the blog post object and set it to a variable called <span class="code">blogPost</span> using the following code:
<cfset blogPost = EntityLoad('BlogPost',url.id,true) />
</li>
<li>
Then replace the placeholder content with the real content. Locate the <span class="code"><h2></span> tag and replace its content with <span class="code">#blogPost.title#</span>.
</li>
<li>
Replace the date with <span class="code">#dateformat(blogPost.dateposted,'mm/dd/yyyy')#</span>.
</li>
<li>
Replace the blog body placeholder text; this is the next five <span class="code"><p></span> tags. Delete these and replace them with <span class="code">#blogPost.body#</span>.
</li>
<li>
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 <span class="code"><a></span> tag:
#blogPost.id#
</li>
<li>
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>
</li>
<li>
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 <span class="code">arrayLen</span> function. Replace the number '2' with the following code:
#arrayLen(blogPost.getComments())#
</li>
<li>
Now, loop over the comments and output them. To do this, use a <span class="code"><cfloop></span> tag. Just after the HTML comment tag, <span class="code">Start Comment</span>, create a <span class="code"><cfloop></span> tag with the following attributes:
<ul>
<li>
<strong>array</strong>: #blogPost.getComents()#
</li>
<li>
<strong>index</strong>: comment
</li>
</ul>
</li>
<li>
Place a closing <span class="code"></cfloop></span> tag before the HTML comment tag, <span class="code">End Comment</span> and remove the other <span class="code"><li></span> tag.
</li>
<li>
The comment object will now be available in the comment variable. Replace the date with the following code:
#dateFormat(comment.createdDateTime,'mm/dd/yyyy')#
</li>
<li>
Replace the time with the following code:
#timeformat(comment.createdDateTime,'short')#
</li>
<li>
Replace 'Simon Free' with the following code:
#comment.author#
</li>
<li>
And finally, replace the placeholder text in the <span class="code"><p></span> tag with the following code:
#comment.comment#
</li>
<li>
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>
</li>
<li>
Next, wrap the entire <span class="code"><div class="left></span> block in a <span class="code"><cfoutput></span> tag block. The opening <span class="code"><cfoutput></span> will start on or around line 25. The closing <span class="code"></cfoutput></span> should be placed on or around line 93.
</li>
<li>
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 <span class="code"><cfparam></span> tag with the following attributes:
<ul>
<li>
<strong>name</strong>: form.submitted
</li>
<li>
<strong>default</strong>: 0
</li>
</ul>
</li>
<li>
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 <span class="code">form.submitted</span> value. After the <span class="code"><cfset></span> tag on or around line two, create a <span class="code"><cfif></span> tag, which checks if <span class="code">form.submitted</span> 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>
</li>
<li>
Inside the <span class="code"><cfif></span> block, create a new instance of the <span class="code">blogComment</span> entity and set the author and comment values from the <span class="code">form</span> scope. Your code should look similar to this:
<cfset comment = entityNew('blogComment') />
<cfset comment.author = form.author />
<cfset comment.comment = form.comment />
</li>
<li>
Next, set the <span class="code">createdDateTime</span> value using the <span class="code">now()</span> function and add the comment to the <span class="code">blogPost</span> 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) />
</li>
<li>
Now that you have created the comment and added it to the blog post, you need to save these changes by calling <span class="code">entitySave</span> on the <span class="code">blogPost</span> object. Add the following line of code after your last <span class="code"><cfset></span> tag:
<cfset EntitySave(blogPost) />
</li>
<li>
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>
</li>
<li>
Locate the <span class="code"><form></span> tag on or around line 78 and append the following code to the <span class="code">action</span> attribute:
#blogPost.id#
</li>
<li>
Open up the <span class="code">/www/blog.cfm</span> page in your browser. Navigate to a blog post and enter a comment. You should now see your comment displayed in the comment section.
</li>
</ol>