Appendix B, Building Websites with ExpressionEngine

Appendix B: Solutions to Exercises

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

Updates/Errata

The example code for the solution to chapter 7, exercise 3, is missing the underscores in the custom field names. I.e. {toastcalendartime} should be {toastcalendar_time} and {toastcalendarlocation} should be {toastcalendar_location}

File Downloads

square.png (for Chapter 3, Exercise 3c)

Template Downloads

Chapter 3, Exercise 2: changes/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>Latest Changes</title> <link rel='stylesheet' type='text/css' media='all' href='{path=toast/toast_css}' /> <style type='text/css' media='screen'>@import "{path=toast/toast_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> <h2>Latest Changes</h2> </div> <div id="content"> {exp:channel:entries channel="toastchanges"} <h3>{title}</h3> <div class="contentinner"> {summary} {body} {extended} </div> <p class="footnote">Written by {author} on {entry_date format="%F %j%S"}</p> {/exp:channel:entries} </div> </body> </html>

Chapter 3, Exercise 3a: toast/toast_css*

body{ background: #DAA520; font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5% auto; width: 770px; } #header{ background: url('{site_url}images/square.png') no-repeat top left; background-color: #FFD700; height: 151px; margin-bottom: 30px; } #header h1{ color: black; font-family: Arial, Helvetica, sans-serif; font-size: 300%; font-weight: bold; text-align: left; margin-top: 25px; margin-left: 225px; } #header h2{ color: #DAA520; font-family: Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; text-align: left; margin-left: 225px; } #content{ font-size: 80%; width: 70%; float: left; } #content h3{ color: #FFFF00; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #content p{ margin: 1%; } .contentinner{ background: #FFD700; border: 2px dotted #FFEFD5; } .footnote{ color: #FFFF00; font-size: 75%; text-align: right; } * Template type must be defined as CSS Stylesheet

Chapter 3, Exercise 3b: toast/toast_css*

body{ background: #8B4513; font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5% auto; width: 770px; } #header{ background: url('{site_url}images/square.png') no-repeat top left; background-color: #DEB887; height: 200px; margin-bottom: 30px; } #header h1{ color: black; font-family: Arial, Helvetica, sans-serif; font-size: 300%; font-weight: bold; text-align: left; margin-top: 25px; margin-left: 275px; } #header h2{ color: #8B4513; font-family: Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; text-align: left; margin-left: 275px; } #content{ font-size: 80%; width: 100%; float: left; } #content h3{ color: #F0E68C; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #content p{ margin: 1%; } .contentinner{ background: #DEB887; border: 2px dotted #FFEFD5; } .footnote{ color: #F0E68C; font-size: 75%; text-align: right; } * Template type must be defined as CSS Stylesheet

Chapter 4, Exercise 2 alternative A: toast/.menu

<h4>Menu</h4> <ul> {exp:channel:entries channel="toastmenu" dynamic="off" sort="asc"} {if toastmenu_link1} <li> <a href="{toastmenu_link1}" title="{toastmenu_description1}">{title}</a> <div>{toastmenu_description1}</div> </li> {/if} {if toastmenu_link2} <li> <a href="{toastmenu_link2}" title="{toastmenu_description2}">{title}</a> <div>{toastmenu_description2}</div> </li> {/if} {if toastmenu_link3} <li> <a href="{toastmenu_link3}" title="{toastmenu_description3}">{title}</a> <div>{toastmenu_description3}</div> </li> {/if} {/exp:channel:entries} </ul>

Chapter 4, Exercise 2 alternative B: toast/.menu

<h4>Menu</h4> <ul> {exp:channel:entries channel="toastmenu" dynamic="off" sort="asc"} <li> <a href="{toastmenu_link}" title="{toastmenu_description}">{title}</a> <div>{toastmenu_description}</div> </li> {/exp:channel:entries} </ul>

Chapter 4, Exercises 3 and 4: toast/toast_css*

body{ background: #8B4513; font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5% auto; width: 770px; } a{ color: red; text-decoration: none; font-weight: bold; } a:hover{ border-top: 1px solid #FFEFD5; border-bottom: 1px solid #FFEFD5; } a:visited{ color: #A52A2A; } #header{ background: url('{site_url}images/square.png') no-repeat top left; background-color: #DEB887; height: 151px; margin-bottom: 30px; } #header h1{ color: black; font-family: Arial, Helvetica, sans-serif; font-size: 300%; font-weight: bold; text-align: left; margin-top: 25px; margin-left: 225px; } #header h2{ color: #8B4513; font-family: Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; text-align: left; margin-left: 225px; } #topmenu{ background: #DEB887; text-align: center; font-size: 75%; } #topmenu ul li{ display:inline; margin-top: 5px; margin-right: 5px; } #topmenu a{ color: red; text-decoration: none; font-weight: bold; } #topmenu a:hover{ border-top: 1px solid #FFEFD5; border-bottom: 1px solid #FFEFD5; } #topmenu a:visited{ color: #A52A2A; } #content{ font-size: 80%; width: 70%; float: left; } #content h3{ color: #F0E68C; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #content p{ margin: 1%; } #menu{ width: 25%; float: right; margin-top: 50px; border: 2px dotted #FFEFD5; background: #DEB887; font-size: 70%; } #menu h4{ border-bottom: 1px solid #FFEFD5; margin: 10px; } #menu ul{ list-style: none; } #menu ul li{ margin-left: -25px; padding-left: -25px; margin-bottom: 5px; } #footer{ width: 65%; text-align: center; margin: 10px; border-top: 1px solid #F0E68C; font-size: 65%; color: #F0E68C; float: left; } .contentinner{ background: #DEB887; border: 2px dotted #FFEFD5; } .footnote{ color: #F0E68C; font-size: 75%; text-align: right; } * Template type must be defined as CSS Stylesheet

Chapter 5, Exercises 2 and 3: news/index

{assign_variable:my_channel="toastnews"} {assign_variable:my_template_group="news"} {assign_variable:my_site_wide_templates="toast"} <!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> {if segment_3} <title>Toast for Sale: {exp:channel:entries channel="{my_channel}" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"}{title}{/exp:channel:entr ies}</title> {if:else} <title>News from the President</title> {/if} <link rel='stylesheet' type='text/css' media='all' href='{path={my_site_wide_templates}/toast_css}' /> <style type='text/css' media='screen'>@import site_wide_templates}/toast_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> {if segment_3} {exp:channel:entries channel="{my_channel}" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"} <h2>{title}</h2> {/exp:channel:entries} {if:else} <h2>News from the President</h2> {/if} </div> <div id="content"> {if segment_3} {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes"} {if no_results} {redirect="404"} {/if} <h3>{title}</h3> <div class="contentinner"> {body} {extended} </div> <p class="footnote">Written by {author} on {entry_date format="%F %j%S"}</p> <p class="footnote"><a href="{site_url}{my_template_group}/index_exercise" title="Back to News">Go back to all news...</a></p> {/exp:channel:entries} <h3>Comments</h3> {exp:comment:preview} <div class="contentinner"> {comment} </div> <p class="footnote">Being Previewed by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i%A'}</p> {/exp:comment:preview} {exp:comment:entries} {if comments} <div class="contentinner"> {comment} </div> <p class="footnote">Posted by {name} on {comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</p> {/if} {/exp:comment:entries} <h3>Post a Comment</h3> {exp:comment:form preview="{my_template_group}/index_exercise"} {if logged_out} <p> Name:<br /> <input type="text" name="name" value="{name}" size="50" /> </p> <p> Email:<br /> <input type="text" name="email" value="{email}" size="50" /> </p> {/if} <p> <textarea name="comment" cols="50" rows="12">{comment}</textarea> </p> {if logged_out} <p><input type="checkbox" name="save_info" value="yes" {save_info} /> Remember my personal information</p> {/if} <p><input type="checkbox" name="notify_me" value="yes" {notify_me} /> Notify me of follow-up comments?</p> {if captcha} <p>Submit the word you see below:</p> <p> {captcha} <br /> <input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" /> </p> {/if} <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> {/exp:comment:form} {/if} {if segment_3==''} {exp:channel:entries channel="{my_channel}"} <h3><a href="{title_permalink="{my_template_group}/index_exercise"}">{title}</a></h3> <div class="contentinner"> {summary} </div> <p class="footnote"><a href="{title_permalink="{my_template_group}/index_exercise"}">Read more...</a></p> {/exp:channel:entries} {/if} </div> <div id="menu"> {embed={my_site_wide_templates}/.menu} </div> </body> </html>

Chapter 6, Exercises 3, 4 and 5: toast/.menu

<h4>Menu</h4> <ul> <li> <a href="{site_url}" title="Welcome page ">Welcome</a> <div>Introduction to our business</div> </li> <li> <a href="{site_url}about" title="About our company ">More About our Company</a> <div>Is online toast the best thing since sliced bread? We think so</div> </li> <li> <a href="{site_url}news" title="News from the President">News from the President</a> <div>The latest news our President deems worthy of sharing</div> </li> {if logged_in} <li> <a href="{site_url}promotions" title="Promotions">Promotions</a> <div>Check our our current deals!</div> </li> {/if} {if logged_in AND (member_group==1 OR member_group==6)} <li> <a href="{site_url}promotions" title="Promotions">Stand-Alone Entry Form</a> <div>Submit a new post</div> </li> {/if} </ul> <h4>Members</h4> <ul> {if logged_out} <li> <a href="{path=member/login}" title="Log into our toast website">Login</a> <div>Log into our toast website to access the member-only areas</div> </li> <li> <a href="{path=member/forgot_password}" title="Forgot Password?">Forgot Password?</a> <div>Get a password reminder</div> </li> <li> <a href="{path=member/register}" title="Register as a new member">Register</a> <div>Not yet a member? Sign-up today!</div> </li> {/if} {if logged_in} <li> <a href="{path=member/profile}" title="Member profile">Profile</a> <div>View or edit your member profile</div> </li> <li> <a href="{path=member/memberlist}" title="Member list">Member list</a> <div>See everyone who has signed up</div> </li> <li> <a href="{path=logout}" title="Log out of our toast website">Logout</a> <div>Log out of our toast website</div> </li> {/if} </ul> <h4>New Products Mailing List</h4> <p>Enter your email address to be notified right away when new toast products are available:<br /> {exp:mailinglist:form list="newproducts"} <input type="text" name="email" value="{email}" /><br /><br /> <input type="submit" value="submit" /> {/exp:mailinglist:form} </p> <h4>Monthly Newsletter</h4> <p>Sign up for our monthly newsletter on the toast world:<br /> {exp:mailinglist:form list="toastmonthly"} <input type="text" name="email" value="{email}" /><br /><br /> <input type="submit" value="submit" /> {/exp:mailinglist:form} </p>

Chapter 7, Exercises 1 and 3: toast/calendar

{assign_variable:my_channel="toastcalendar"} {assign_variable:my_template_group="calendar"} {assign_variable:my_site_wide_templates="toast"} <!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>Toast for Sale: Calendar of Toast</title> <link rel='stylesheet' type='text/css' media='all' href='{path={my_template_group}/calendar_css}' /> <style type='text/css' media='screen'>@import "{path={my_template_group}/calendar_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> <h2>Calendar of Toast</h2> </div> <div id="content"> {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={my_template_group}/index}"><<</a></th> <th colspan="5">{date format="%F %Y"}</th> <th><a href="{next_path={my_template_group}/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} {exp:channel:entries channel="{my_channel}" year="{segment_2}" month="{segment_3}" day="{day_number}" limit="5" orderby="toastcalendar_time" show_future_entries="yes"} {if editorsonly=="Yes"} {if member_group=='1' OR member_group=='6'} <div class="calendarEvent orange"> <a href="{title_permalink={my_template_group}/event}"> {toastcalendar_time}<br /> {title}<br /> <i>{toastcalendar_location}</i> </a> </div> {/if} {if:else} <div class="calendarEvent"> <a href="{title_permalink=calendar/event}"> {toastcalendar_time}<br /> {title}<br /> <i>{toastcalendar_location}</i> </a> </div> {/if} {/exp:channel: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>Upcoming Events</h2> {exp:channel:entries channel="{my_channel}" limit="5" require_entry="yes" show_future_entries="yes" sort="asc" dynamic="off" start_on="{current_time format='%Y-%m-%d %g:%i %A'}"} {if no_results} <h3>No Upcoming Events</h3> {/if} <h3>{title}<br /><i>{if toastcalendar_time}{toastcalendar_time} on {/if}{entry_date format="%F %j%S %Y"}</i></h3> <div class="contentinner"> {if toastcalendar_location} <b>{toastcalendar_location}</b><br /> {/if} {if toastcalendar_description} {toastcalendar_description}<br /><br /> {/if} {if toastcalendar_URL} {toastcalendar_URL}<br /> {/if} </div> {/exp:channel:entries} </div> <div id="menu"> {embed={my_site_wide_templates}/.menu} </div> </body> </html>

Chapter 7, Exercise 3: toast/calendar_css

@import url({site_url}toast/toast_css); .orange{ border-left: 1px solid orange; border-right: 1px solid orange; } .calendarBG{ background-color: #000; } .calendarHeader{ font-weight: bold; color: #fff; text-align: center; background-color: #000; } .calendarHeader a{ color: #F0E68C; } .calendarHeader a:visited{ color: #F0E68C; } .calendarDayHeading{ font-weight: bold; font-size: 11px; color: #fff; background-color: #663300; text-align: center; vertical-align: middle; } .calendarCell{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #666; background-color: #fff; width: 60px; height: 60px; } .calendarToday{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #000; background-color: #ccc; width: 60px; height: 60px; } .calendarBlank{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #666; background-color: #9db7a7; width: 60px; height: 60px; } .calendarEvent a { font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif; font-size: 10px; text-decoration: none; color: #000; background-color: #fff; border-bottom: 1px solid #666; vertical-align: top; text-align: left; margin: 0px; padding-bottom: 5px; display: block; } .calendarEvent a:hover { background-color: #ccc; } * Template type must be defined as CSS Stylesheet

Chapter 8, Exercise 1: toastgallery/index

Chapter 8, Exercise 2: toastgallery/browse

{assign_variable:gallery_name="toastphotos"} {assign_variable:my_template_group="toastgallery"} {assign_variable:my_site_wide_templates="toast"} <!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>Toast for Sale: Toast Gallery{exp:gallery:category_name} - {category}{/exp:gallery:category_name}</title> <link rel='stylesheet' type='text/css' media='all' href='{path={my_site_wide_templates}/toast_css}' /> <style type='text/css' media='screen'>@import "{path={my_site_wide_templates}/toast_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> {exp:gallery:category_name}<h2>{category}</h2>{/exp:gallery:category_name} {if segment_3 == ""}<h2>All Photos</h2>{/if} </div> <div id="content"> <h3><a href="{path=toastgallery}">Toast Gallery</a>{exp:gallery:category_name} <b>›</b> {category}{/exp:gallery:category_name}</h3> {exp:gallery:entries gallery="{gallery_name}" orderby="date" sort="desc" columns="2" rows="3" log_views="off"} <div class="contentinner"> <form> <select name="URL" onChange="window.location=this.options[this.selectedIndex].value"> <option value=" ">Category Jump Navigation</option> {exp:gallery:category_list gallery="{gallery_name}"} <option value="{category_path=toastgallery/browse} ">{category_name}</option> {/exp:gallery:category_list} </select> </form> <table cellpadding="6" cellspacing="1" border="0" width="99%"> {entries} {row_start}<tr>{/row_start} {row} <td> <a href="{id_path=toastgallery/photo}"><img src="{thumb_url}" border="0" title="{title}" /></a> <br /> <div>{if views>10}*hot* {/if}{title}</div> </td> {/row} {row_end}</tr>{/row_end} {/entries} </table> </div> {paginate} <div class="footnote"> <span>Page {current_page} of {total_pages} pages</span> <br /> {pagination_links} </div> {/paginate} {/exp:gallery:entries} </div> <div id="menu"> {embed={my_site_wide_templates}/.menu} </div> </body> </html>

leonardmurphy.com

Building Websites with ExpressionEngine 1.6