Looping - Hands On 8

gistfile1.md

In this hands on, we will create a more complex loop that uses an array of structures.

Tags Used: <cfscript>, <cfloop>, <cfoutput>

Functions Used: arrayAppend

1. Open the /www/portfolio.cfm file in your code editor.
2. At the top of the file, create open and closing <cfscript> tags.
3. Inside the <cfscript> tags create a variable myPortfolio and instantiate an empty array.
4. Your code should look similar to this:

   <cfscript>
   	myPortfolio = [];
   </cfscript>
   

5. Once you have an empty array, you need to populate it with some data. Below the variable declaration, write the following line of code:

   arrayAppend(myPortfolio,{title='',website='',image='',description=''});
   

6. Add this line 2 more times.
7. Provide information for all 3 structures. Your code should look similar to this:

   <cfscript>
   	myPortfolio = [];
   	arrayAppend(myPortfolio,{title='Title 1',website='http://www.website1.com',image='portfolio1.png',description='Description 1'});
   	arrayAppend(myPortfolio,{title='Title 2',website='http://www.website2.com',image='portfolio2.png',description='Description 2'});
   	arrayAppend(myPortfolio,{title='Title 3',website='http://www.website3.com',image='portfolio3.png',description='Description 3'});
   </cfscript>
   

8. Go to the comment Start Portfolio.
9. Once the array has been populated you can loop over it and output its data. Below the comment, create a <cfloop> tag with the following attributes:
   • array: #myPortfolio#
   • index: portfolio
10. Add a closing </cfloop> tag after the first closing </li> tag.
11. Replace the value of the href attribute with #portfolio.website#.
12. Replace the value of the title attribute with #portfolio.title#.
13. Replace the src attribute of the <img> tag with assets/images/portfolio/#portfolio.image#.
14. Replace the contents of the <h5> tag with #portfolio.title#.
15. Replace the contents of the <p> tag with #portfolio.description#.
16. Delete the remaining 2 <li> tags that are outside of the <cfloop>.
17. Wrap the <cfloop> tag with an opening and closing <cfoutput> tag.
18. Your code should look similar to this:

    <ul id="portfolio-list">
        <!-- Start Portfolio -->
    	<cfoutput>
    		<cfloop array="#myPortfolio#" index="portfolio">
    			<li>
    			&lt;div class="left"&gt;
    				&lt;a href="#portfolio.website#" title="#portfolio.title#" class="viewDetail "&gt;
    					&lt;img src="images/assets/small/#portfolio.image#"   alt=" " border="0" /&gt;
    					&lt;h5&gt;#portfolio.title#&lt;/h5&gt;
    				&lt;/a&gt;
    			&lt;/div&gt;
    			&lt;div class="right"&gt;
    				&lt;p&gt;
    					#portfolio.description#
    				&lt;/p&gt;
    			&lt;/div&gt;
    		&lt;/li&gt;    
    	&lt;/cfloop&gt;    
    &lt;/cfoutput&gt;                
    
    </ul>
    

19. Load the /www/portfolio.cfm page in your browser; notice that the contents from the struct is being displayed.

Homework

1. Update the contents of the structs with more relevant information.
2. Add 2 new portfolio items.