Appendix B, Building Websites with ExpressionEngine 2

Appendix B: Solutions to Exercises

Appendix B provides example solutions to the exercises found throughout the book.

Updates/Errata

There are no updates or errata at this time.

Template Downloads

Chapter 3, Exercise 1: site/index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Channel Content</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> {exp:channel:entries channel="news" limit="2"} <h1>{title}</h1> {news_body} {news_extended} <img src="{news_image}" alt="{title}" /> <hr /> {/exp:channel:entries} </body> </html>

Chapter 4, Exercise 1: business/index

{embed="includes/.website_page" url_title="small_business"}

Chapter 4, Exercise 1: contact/index

{embed="includes/.website_page" url_title="get_in_touch"}

Chapter 4, Exercise 1: promotion/index

{embed="includes/.website_page" url_title="promotion"}

Chapter 5, Exercise 2: faqs/index

{preload_replace:my_channel="faqs"} {preload_replace:my_template_group="faqs"} {preload_replace:my_single_entry_template="browse"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> {if segment_2=="category"} {exp:channel:category_heading channel="{my_channel}"} <title>Questions About {category_name} - Ed & Eg Financial Advisors</title> {/exp:channel:category_heading} {if:else} <title>Frequently Asked Questions - Ed & Eg Financial Advisors</title> {/if} <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {if segment_2=="category"} {exp:channel:category_heading channel="{my_channel}"} <h1>Questions About {category_name}</h1> <p>{category_description}</p> {/exp:channel:category_heading} {if:else} <h1>Frequently Asked Questions</h1> <p><strong>Ed & Eg</strong> have been assisting people for over 30 years. If you have a financial question that's burning a hole in your pocket, email us at faq@example.com and we will answer it here!</p> <p>Don't forget to subscribe to our <a href="{site_url}faqs/rss" title="RSS Feed">RSS feed</a> to stay up-to-date with new FAQs as they are posted.</p> {/if} {exp:channel:entries channel="{my_channel}" limit="10" paginate="bottom"} <h2>{title}</h2> <p><strong>Q: </strong><em>{faqs_question}</em><br /><strong>Posted by {author} on {entry_date format="%m/%d"}</strong></p> <p><strong>A: </strong><a href="{title_permalink="{my_template_group}/{my_single_entry_template}"}">Read the answer here!</a></p> <p class="meta"><strong>Categories: </strong>{categories backspace="3"}<a href="{path={my_template_group}}">{category_name}</a> | {/categories}<a href="{comment_url_title_auto_path}" class="comments">Comments ({comment_total})</a></p> {paginate} {if "{total_pages}" != 1} <hr /> <p>Page {current_page} of {total_pages} pages {pagination_links}</p> {/if} {/paginate} {/exp:channel:entries} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 5, Exercise 2: faqs/browse

{preload_replace:my_channel="faqs"} {preload_replace:my_template_group="faqs"} {preload_replace:my_single_entry_template="browse"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{exp:channel:entries channel="{my_channel}" disable="categories|category_fields|custom_fields|member_data|pagination"}{title}{/exp:channel:entries} - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes"} {if no_results} {redirect="404"} {/if} {if segment_4 != ''} {redirect="404"} {/if} <h1>{title}</h1> <p><strong>Q: </strong><em>{faqs_question}</em><br /><strong>Posted by {author} on {entry_date format="%m/%d"}</strong></p> <p><strong>A: </strong>{faqs_answer}</p> <p><a href={path={my_template_group}} title="Back to FAQs page">Back to FAQs</a></p> {/exp:channel:entries} <h3>Comments</h3> {exp:comment:entries} {if comments} <p>{comment}</p> <p class="meta">Posted by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/if} {if no_results} <p>There are no comments at this time - be the first to share your thoughts!</p> {/if} {/exp:comment:entries} {exp:comment:preview} <p>{comment}</p> <p class="meta">Being previewed by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/exp:comment:preview} {exp:comment:form preview="{my_template_group}/{my_single_entry_template}"} <h3>Post Your Own Comment</h3><br /> {if logged_out} <p><label for="name">Name:</label> <input type="text" name="name" id="name" value="{name}" size="50" /></p> <p><label for="email">Email:</label> <input type="text" name="email" id="email" value="{email}" size="50" /></p> {/if} <p> <label for="comment">Comment:</label><br /> <textarea name="comment" id="comment" cols="80" rows="12">{comment}</textarea> </p> <p> {if logged_out} <input type="checkbox" name="save_info" id="save_info" value="yes" {save_info} /><label for="save_info">Remember my personal information</label><br /> {/if} <input type="checkbox" name="notify_me" id="notify_me" value="yes" {notify_me} /><label for="notify_me">Notify me of follow-up comments?</label> </p> {if captcha} {captcha} <p><label for="captcha">Submit the text you see in the image above:</label> <input type="text" name="captcha" id="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p> {/if} <p> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> </p> {/exp:comment:form} <h2>Other Questions Like This</h2> <br /> {exp:channel:entries channel="{my_channel}" limit="5" related_categories_mode="yes" custom_fields="yes" orderby="random"} {if no_results} <p>There are no questions like this currently – check back soon though...we’re always adding more!</p> {/if} <p><strong>Q: </strong><em>{faqs_question}</em><br /> <strong>A: </strong><a href="{title_permalink="{my_template_group}/{my_single_entry_template}"}">Read the answer here!</a></p> {/exp:channel:entries} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 5, Exercise 3: website_faqs (Snippet)

<div id="widebar"> {exp:channel:entries channel="faqs" limit="3" orderby="random" dynamic="off" status="featured"} <div id="{switch='colA|colB|colC'}"> <h3>Frequently Asked Question</h3> <p>{faqs_question} <a href="{title_permalink=faqs/browse}">Find out…</a></p> </div> {/exp:channel:entries} <div style="clear: both;"> </div> </div>

Chapter 5, Exercise 3: faqs/index

Chapter 5, Exercise 3: faqs/browse

{preload_replace:my_channel="faqs"} {preload_replace:my_template_group="faqs"} {preload_replace:my_single_entry_template="browse"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{exp:channel:entries channel="{my_channel}" disable="categories|category_fields|custom_fields|member_data|pagination" status="Open|Featured"}{title}{/exp:channel:entries} - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes"} {if no_results} {redirect="404"} {/if} {if segment_4 != ''} {redirect="404"} {/if} <h1>{title}</h1> <p><strong>Q: </strong><em>{faqs_question}</em></p> <p><strong>A: </strong>{faqs_answer}</p> <p><a href={path={my_template_group}} title="Back to FAQs page">Back to FAQs</a></p> {/exp:channel:entries} <h3>Comments</h3> {exp:comment:entries} {if comments} <p>{comment}</p> <p class="meta">Posted by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/if} {if no_results} <p>There are no comments at this time - be the first to share your thoughts!</p> {/if} {/exp:comment:entries} {exp:comment:preview} <p>{comment}</p> <p class="meta">Being previewed by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/exp:comment:preview} {exp:comment:form preview="{my_template_group}/{my_single_entry_template}"} <h3>Post Your Own Comment</h3><br /> {if logged_out} <p><label for="name">Name:</label> <input type="text" name="name" id="name" value="{name}" size="50" /></p> <p><label for="email">Email:</label> <input type="text" name="email" id="email" value="{email}" size="50" /></p> {/if} <p> <label for="comment">Comment:</label><br /> <textarea name="comment" id="comment" cols="80" rows="12">{comment}</textarea> </p> <p> {if logged_out} <input type="checkbox" name="save_info" id="save_info" value="yes" {save_info} /><label for="save_info">Remember my personal information</label><br /> {/if} <input type="checkbox" name="notify_me" id="notify_me" value="yes" {notify_me} /><label for="notify_me">Notify me of follow-up comments?</label> </p> {if captcha} {captcha} <p><label for="captcha">Submit the text you see in the image above:</label> <input type="text" name="captcha" id="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p> {/if} <p> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> </p> {/exp:comment:form} <h2>Other Questions Like This</h2> <br /> {exp:channel:entries channel="{my_channel}" limit="5" related_categories_mode="yes" custom_fields="yes" orderby="random" status="Open|Featured"} {if no_results} <p>There are no questions like this currently – check back soon though...we’re always adding more!</p> {/if} <p><strong>Q: </strong><em>{faqs_question}</em><br /> <strong>A: </strong><a href="{title_permalink="{my_template_group}/{my_single_entry_template}"}">Read the answer here!</a></p> {/exp:channel:entries} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 5, Exercise 3: faqs/atom

{exp:rss:feed channel="faqs"} <?xml version="1.0" encoding="{encoding}"?> <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="{channel_language}"> <title type="text">{exp:xml_encode}{channel_name}{/exp:xml_encode}</title> <subtitle type="text">{exp:xml_encode}{channel_name}:{channel_description}{/exp:xml_encode}</subtitle> <link rel="alternate" type="text/html" href="{channel_url}" /> <link rel="self" type="application/atom+xml" href="{path={atom_feed_location}}" /> <updated>{gmt_edit_date format='%Y-%m-%dT%H:%i:%sZ'}</updated> <rights>Copyright (c) {gmt_date format="%Y"}, {author}</rights> <generator uri="http://expressionengine.com/" version="{version}">ExpressionEngine</generator> <id>tag:{trimmed_url},{gmt_date format="%Y:%m:%d"}</id> {exp:channel:entries channel="faqs" limit="15" dynamic_start="on" disable="member_data" status="Open|Featured"} <entry> <title>{exp:xml_encode}{title}{/exp:xml_encode}</title> <link rel="alternate" type="text/html" href="{comment_url_title_auto_path}" /> <id>tag:{trimmed_url},{gmt_entry_date format="%Y"}:{relative_url}/{channel_id}.{entry_id}</id> <published>{gmt_entry_date format="%Y-%m-%dT%H:%i:%sZ"}</published> <updated>{gmt_edit_date format='%Y-%m-%dT%H:%i:%sZ'}</updated> <author> <name>{author}</name> <email>{email}</email> {if url}<uri>{url}</uri>{/if} </author> {categories} <category term="{exp:xml_encode}{category_name}{/exp:xml_encode}" scheme="{path=faqs/browse}" label="{exp:xml_encode}{category_name}{/exp:xml_encode}" />{/categories} <content type="html"><![CDATA[ <p>{faqs_question}</p><p><a href="{title_permalink=faqs/browse}">Find out...</a></p> ]]></content> </entry> {/exp:channel:entries} </feed> {/exp:rss:feed}

Chapter 5, Exercise 3: faqs/rss

{exp:rss:feed channel="faqs"} <?xml version="1.0" encoding="{encoding}"?> <rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/"> <channel> <title>{exp:xml_encode}{channel_name}{/exp:xml_encode}</title> <link>{channel_url}</link> <description>{channel_description}</description> <dc:language>{channel_language}</dc:language> <dc:creator>{email}</dc:creator> <dc:rights>Copyright {gmt_date format="%Y"}</dc:rights> <dc:date>{gmt_date format="%Y-%m-%dT%H:%i:%s%Q"}</dc:date> <admin:generatorAgent rdf:resource="http://expressionengine.com/" /> {exp:channel:entries channel="faqs" limit="10" dynamic_start="on" disable="member_data" status="Open|Featured"} <item> <title>{exp:xml_encode}{title}{/exp:xml_encode}</title> <link>{comment_url_title_auto_path}</link> <guid>{comment_url_title_auto_path}#When:{gmt_entry_date format="%H:%i:%sZ"}</guid> <description><![CDATA[<p>{faqs_question}</p><p><a href="{title_permalink=faqs/browse}">Find out...</a></p>]]></description> <dc:subject>{exp:xml_encode}{categories backspace="1"}{category_name}, {/categories}{/exp:xml_encode}</dc:subject> <dc:date>{gmt_entry_date format="%Y-%m-%dT%H:%i:%s%Q"}</dc:date> </item> {/exp:channel:entries} </channel> </rss> {/exp:rss:feed}

Chapter 6, Exercise 3: promotion/index

{if logged_in} {embed="includes/.website_page" url_title="promotion"} {if:else} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Promotion! - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> <h1>Promotion</h1> <p>Promotions are only available to registered members. If you are already a member, please <a href="{path=member/login}" title="Log into our website">login</a>. Otherwise, consider <a href="{path=member/register}" title="Register as a new member">registering</a> for access to our latest promotions and premium content.</p> </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html> {/if}

Chapter 7, Exercise 1: calendar/index

{preload_replace:my_channel="events"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Calendar - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=calendar/calendar_css}" rel="stylesheet" type="text/css" media="screen" /> {exp:jquery:script_tag} <script type="text/javascript" src="{site_url}fancybox/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.easing-1.3.pack.js"></script> <link rel="stylesheet" type="text/css" href="{site_url}fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $(".popup").fancybox({ 'width': '75%', 'height': '75%', 'titlePosition': 'outside', 'autoScale': true, 'margin': 0, 'padding': 0, 'overlayShow': true, 'hideOnContentClick': true, 'overlayOpacity': 0.7, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); }); </script> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> <h1>Seminar Calendar</h1> {exp:channel:calendar switch="calendarToday|calendarCell" channel="{my_channel}" show_future_entries="yes"} <table class="calendarBG" border="0" cellpadding="6" cellspacing="1" summary="My Calendar" width="100%"> <tr class="calendarHeader"> <th><a href="{previous_path=calendar/index}"><<</a></th> <th colspan="5">{date format="%F %Y"}</th> <th><a href="{next_path=calendar/index}">>></a></th> </tr> <tr> {calendar_heading} <td class="calendarDayHeading">{lang:weekday_short}</td> {/calendar_heading} </tr> {calendar_rows} {row_start}<tr>{/row_start} {if entries} <td class='{switch}'> {day_number} {entries} <div class="calendarEvent"><a class="popup" href="{title_permalink=calendar/event}">{title}</a></div> {/entries} </td> {/if} {if not_entries} <td class='{switch}'>{day_number}</td> {/if} {if blank} <td class='calendarBlank'>{day_number}</td> {/if} {row_end}</tr>{/row_end} {/calendar_rows} </table> {/exp:channel:calendar} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 7, Exercise 2: calendar/index

{preload_replace:my_channel="events"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Calendar - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=calendar/calendar_css}" rel="stylesheet" type="text/css" media="screen" /> {exp:jquery:script_tag} <script type="text/javascript" src="{site_url}fancybox/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.easing-1.3.pack.js"></script> <link rel="stylesheet" type="text/css" href="{site_url}fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $(".popup").fancybox({ 'width': '75%', 'height': '75%', 'titlePosition': 'outside', 'autoScale': true, 'margin': 0, 'padding': 0, 'overlayShow': true, 'hideOnContentClick': true, 'overlayOpacity': 0.7, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); }); </script> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> <h1>Seminar Calendar</h1> {exp:channel:calendar switch="calendarToday|calendarCell" channel="{my_channel}" show_future_entries="yes"} <table class="calendarBG" border="0" cellpadding="6" cellspacing="1" summary="My Calendar" width="100%"> <tr class="calendarHeader"> <th><a href="{previous_path=calendar/index}"><<</a></th> <th colspan="5">{date format="%F %Y"}</th> <th><a href="{next_path=calendar/index}">>></a></th> </tr> <tr> {calendar_heading} <td class="calendarDayHeading">{lang:weekday_abrev}</td> {/calendar_heading} </tr> {calendar_rows} {row_start}<tr>{/row_start} {if entries} <td class='{switch}'> {day_number} {entries} <div class="calendarEvent"><a class="popup" href="{title_permalink=calendar/event}">{title}</a></div> {/entries} </td> {/if} {if not_entries} <td class='{switch}'>{day_number}</td> {/if} {if blank} <td class='calendarBlank'>{day_number}</td> {/if} {row_end}</tr>{/row_end} {/calendar_rows} </table> {/exp:channel:calendar} <h2 class="title">Upcoming Event</h2> {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes" show_future_entries="yes" sort="asc" dynamic="off" start_on="{current_time format='%Y-%m-%d %H:%i'}"} {if no_results} <p>No Upcoming Events</p> {/if} <p><strong>{title}</strong><br /><em>{entry_date format="%F %j%S %Y"} at {entry_date format="%g:%i%a"}</em></p> {if events_description} <p>{events_description}</p> {/if} {if events_sponsor} {related_entries id="events_sponsor"} <h3>More About Our Sponsor: {title}</h3> {if event_sponsors_about} <p>{event_sponsors_about}</p> {/if} {/related_entries} {/if} {/exp:channel:entries} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 8, Exercise 1: photos/index

{preload_replace:my_channel="photos"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Photo Galleries - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> {exp:jquery:script_tag} <script type="text/javascript" src="{site_url}fancybox/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.easing-1.3.pack.js"></script> <link rel="stylesheet" type="text/css" href="{site_url}fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a.gallery").fancybox({ 'cyclic': true, 'titlePosition': 'inside', 'overlayShow': true, 'hideOnContentClick': true, 'overlayOpacity': 0.7, 'transitionIn': 'none', 'transitionOut': 'none' }); }); </script> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {if segment_2=="category"} {exp:channel:category_heading channel="{my_channel}"} <h1>{category_name}</h1> <p> {category_description} <br /> <a href={path=photos} title="Back to photos">Browse all photos</a> </p> {/exp:channel:category_heading} {if:else} <h1>Photo Galleries</h1> <p><strong>Instructions</strong>: Select a gallery to view or click on a photo to see enlarged. When viewing in enlarged mode, use your left & right arrow keys to scroll between photos and the escape key to exit enlarged mode.</p> {/if} <form name="catmenu" action=""> <div> <select name="selcat" onchange="location=document.catmenu.selcat.options[document.catmenu.selcat.selectedIndex].value;"> <option value="">--Select Gallery--</option> {exp:channel:categories channel="{my_channel}" style="linear"} <option value="{path='photos'}">{category_name}</option> {/exp:channel:categories} </select> </div> </form> <table> <tr> {exp:channel:entries channel="{my_channel}" orderby="random" limit="10"} <td style="text-align: center; height: 100px; width: 100px;"> <a class="gallery" rel="group" href="{photos_photo}" title="{photos_caption}"><img src="{photos_photo}{path}_thumbs/thumb_{filename}.{extension}{/photos_photo}" alt="{caption}" /></a> <br /> <a href="{title_permalink=photos/comment}">{if comment_total=="1"}1 comment{if:else}{comment_total} comments{/if}</a> </td> {if count!=total_results}{switch="||||</tr><tr>"}{/if} {/exp:channel:entries} </tr> </table> </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 8, Exercise 2: photos/comment

{preload_replace:my_channel="photos"} {preload_replace:my_template_group="photos"} {preload_replace:my_single_entry_template="comment"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{exp:channel:entries channel="{my_channel}" disable="categories|category_fields|custom_fields|member_data|pagination" status="Open|Premium"}{title}{/exp:channel:entries} - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes" status="Open|Premium" track_views="one"} {if no_results} {redirect="404"} {/if} {if segment_4 != ''} {redirect="404"} {/if} <h1>{title}</h1> <br /> <p class="center"><img class="limited" src="{photos_photo}"/> <br /> <em>{photos_caption}</em></p> <p><a href={path={my_template_group}} title="Back to photos">Browse all photos</a></p> {/exp:channel:entries} <h3>Comments</h3> {exp:comment:entries} {if comments} <p>{comment}</p> <p class="meta">Posted by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/if} {if no_results} <p>There are no comments at this time - be the first to share your thoughts!</p> {/if} {/exp:comment:entries} {exp:comment:preview} <p>{comment}</p> <p class="meta">Being previewed by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/exp:comment:preview} {exp:comment:form preview="{my_template_group}/{my_single_entry_template}"} <h3>Post Your Own Comment</h3><br /> {if logged_out} <p><label for="name">Name:</label> <input type="text" name="name" id="name" value="{name}" size="50" /></p> <p><label for="email">Email:</label> <input type="text" name="email" id="email" value="{email}" size="50" /></p> {/if} <p> <label for="comment">Comment:</label><br /> <textarea name="comment" id="comment" cols="80" rows="12">{comment}</textarea> </p> <p> {if logged_out} <input type="checkbox" name="save_info" id="save_info" value="yes" {save_info} /><label for="save_info">Remember my personal information</label><br /> {/if} <input type="checkbox" name="notify_me" id="notify_me" value="yes" {notify_me} /><label for="notify_me">Notify me of follow-up comments?</label> </p> {if captcha} {captcha} <p><label for="captcha">Submit the text you see in the image above:</label> <input type="text" name="captcha" id="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p> {/if} <p> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> </p> {/exp:comment:form} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 8, Exercise 2: photos/index

{preload_replace:my_channel="photos"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Photo Galleries - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> {exp:jquery:script_tag} <script type="text/javascript" src="{site_url}fancybox/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="{site_url}fancybox/jquery.easing-1.3.pack.js"></script> <link rel="stylesheet" type="text/css" href="{site_url}fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a.gallery").fancybox({ 'cyclic': true, 'titlePosition': 'inside', 'overlayShow': true, 'hideOnContentClick': true, 'overlayOpacity': 0.7, 'transitionIn': 'none', 'transitionOut': 'none' }); }); </script> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {if segment_2=="category"} {exp:channel:category_heading channel="{my_channel}"} <h1>{category_name}</h1> <p> {category_description} <br /> <a href={path=photos} title="Back to photos">Browse all photos</a> </p> {/exp:channel:category_heading} {if:else} <h1>Photo Galleries</h1> <p><strong>Instructions</strong>: Select a gallery to view or click on a photo to see enlarged. When viewing in enlarged mode, use your left & right arrow keys to scroll between photos and the escape key to exit enlarged mode.</p> {/if} <form name="catmenu" action=""> <div> <select name="selcat" onchange="location=document.catmenu.selcat.options[document.catmenu.selcat.selectedIndex].value;"> <option value="">--Select Gallery--</option> {exp:channel:categories channel="{my_channel}" style="linear"} <option value="{path='photos'}">{category_name}</option> {/exp:channel:categories} </select> </div> </form> <table> <tr> {exp:channel:entries channel="{my_channel}" orderby="random" limit="10"} <td style="text-align: center; height: 100px; width: 100px;"> <a class="gallery" rel="group" href="{photos_photo}" title="{photos_caption}"><img src="{photos_photo}{path}_thumbs/thumb_{filename}.{extension}{/photos_photo}" alt="{caption}" /></a> <br /> <a href="{title_permalink=photos/comment}">{if comment_total=="1"}1 comment{if:else}{comment_total} comments{/if}</a> <br /> {if view_count_one>="10"}***Popular***{/if} <br /> </td> {if count!=total_results}{switch="||||</tr><tr>"}{/if} {/exp:channel:entries} </tr> </table> </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

Chapter 8, Exercise 3: includes/.comment

<h3>Comments</h3> {exp:comment:entries} {if comments} <p>{comment}</p> <p class="meta">Posted by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/if} {if no_results} <p>There are no comments at this time - be the first to share your thoughts!</p> {/if} {/exp:comment:entries} {exp:comment:preview} <p>{comment}</p> <p class="meta">Being previewed by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p><br /> {/exp:comment:preview} {exp:comment:form preview="{embed:my_template_group}/{embed:my_single_entry_template}"} <h3>Post Your Own Comment</h3><br /> {if logged_out} <p><label for="name">Name:</label> <input type="text" name="name" id="name" value="{name}" size="50" /></p> <p><label for="email">Email:</label> <input type="text" name="email" id="email" value="{email}" size="50" /></p> {/if} <p> <label for="comment">Comment:</label><br /> <textarea name="comment" id="comment" cols="80" rows="12">{comment}</textarea> </p> <p> {if logged_out} <input type="checkbox" name="save_info" id="save_info" value="yes" {save_info} /><label for="save_info">Remember my personal information</label><br /> {/if} <input type="checkbox" name="notify_me" id="notify_me" value="yes" {notify_me} /><label for="notify_me">Notify me of follow-up comments?</label> </p> {if captcha} {captcha} <p><label for="captcha">Submit the text you see in the image above:</label> <input type="text" name="captcha" id="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p> {/if} <p> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> </p> {/exp:comment:form}

Chapter 8, Exercise 3: faqs/browse

{preload_replace:my_channel="faqs"} {preload_replace:my_template_group="faqs"} {preload_replace:my_single_entry_template="browse"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{exp:channel:entries channel="{my_channel}" disable="categories|category_fields|custom_fields|member_data|pagination" status="Open|Premium"}{title}{/exp:channel:entries} - Ed & Eg Financial Advisors</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="{stylesheet=includes/site_css}" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> {website_sitename} {website_menu} </div>  <div id="page"> <div id="content"> {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes" status="Open|Premium"} {if no_results} {redirect="404"} {/if} {if segment_4 != ''} {redirect="404"} {/if} <h1>{title}</h1> <p><strong>Q: </strong><em>{faqs_question}</em></p> {if status!='Premium' OR logged_in} <p><strong>A: </strong>{faqs_answer}</p> {if:else} <p><strong>A: </strong>This answer is available to registered members only. If you are already a member, please <a href="{path=member/login}" title="Log into our website">login</a>. Otherwise, consider <a href="{path=member/register}" title="Register as a new member">registering</a> for free & unlimited access to all our advice.</p> {/if} <p>{if logged_in}<a href="{title_permalink='{my_template_group}/friend'}">Tell-a-Friend</a> | {/if}<a href={path={my_template_group}} title="Back to FAQs page">Back to FAQs</a></p> {/exp:channel:entries} {embed="includes/.comment" my_template_group="{my_template_group}" my_single_entry_template="{my_single_entry_template}"} <h2>Other Questions Like This</h2> <br /> {exp:channel:entries channel="{my_channel}" limit="5" related_categories_mode="yes" custom_fields="yes" orderby="random"} {if no_results} <p>There are no questions like this currently – check back soon though...we’re always adding more!</p> {/if} <p><strong>Q: </strong><em>{faqs_question}</em><br /> <strong>A: </strong><a href="{title_permalink="{my_template_group}/{my_single_entry_template}"}">Read the answer here!</a></p> {/exp:channel:entries} </div>  {website_sidebar} <div style="clear: both;"> </div> {website_faqs} </div>  </div>  <div id="footer"> <p>(c) 2007 Eg & Ed. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p> </div> </div>  </body> </html>

leonardmurphy.com

Building Websites with ExpressionEngine 2