Chapter 9, Building Websites with ExpressionEngine 2

Chapter 9: Beyond the Basics

Chapter 9 walks you through additional 1st-party modules for ExpressionEngine, including the Search module, the Email module, the Mailing List module, the Moblog module and the wiki.

Updates/Errata

In different places in this chapter, I mention that you cannot send outgoing mail when working in a localhost environment. However, this is not always true and with some localhost environments (including MAMP on the Mac), it is possible to configure ExpressionEngine to send outgoing mail.

File Downloads

mountain.jpg

Template Downloads

search/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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Search Results - 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>Search Results</h1> <p>You searched for <em>{exp:search:keywords}</em>.</p> <br /> <table width="100%"> <tr> <th>Title</th> <th>Excerpt</th> </tr> {exp:search:search_results} <tr style="background-color: {switch="#d3e3d3|#ffffff"};"> <td style="width: 40%; text-align: center;"> <strong><a href="{auto_path}">{channel}: {title}</a></strong> <br /> {if comment_total=="1"} 1 Comment {if:else} {comment_total} Comments {/if} </td> <td style="width: 60%; padding:6px;">{excerpt}</td> </tr> {/exp:search:search_results} </table> {if paginate} <div class='paginate'> <span>{page_count}</span> {paginate} </div> {/if} </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>

search/noresults

website_sidebar (snippet)

<div id="sidebar"> <ul> <li> <h3>Promotion!</h3> <p>From now until the end of the year, Ed & Eg are offering a <strong>free</strong> initial 90 minute consultation, plus <strong>25% off</strong> your first return visit. <a href="{site_url}promotion">Learn More…</a></p> </li> <li> <h3>Key Services</h3> <ul> <li>-Budgeting</li> <li>-Debt Management</li> <li>-Investing</li> <li>-Financial Planning</li> <li>-Tax Services</li> <li>-Book-keeping & Cash Flow</li> <li>-Accounts Preparation</li> <li>-Payroll Services</li> </ul> </li> <li> <h3>Member Links</h3> <ul> {if logged_out} <li> <a href="{path=member/login}" title="Log into our website">Login</a> </li> <li> <a href="{path=member/forgot_password}" title="Forgot Password?">Forgot Password?</a> </li> <li> <a href="{path=member/register}" title="Register as a new member">Register</a> </li> {/if} {if logged_in} <li> <a href="{path=member/profile}" title="Member profile">Profile</a> </li> <li> <a href="{path=member/memberlist}" title="Member list">Member list</a> </li> <li> <a href="{path=logout}" title="Log out of our website">Logout</a> </li> {/if} </ul> </li> <li> {exp:search:simple_form channel="faqs|photos" search_in="everywhere" status="open|premium" where="all" result_page="search" no_result_page="search/noresults" show_future_entries="yes"} <h3><label for="search">Search:</label></h3> <br /> <input type="text" id="search" name="keywords" value="" size="18" maxlength="100" /> <input class="button" type="submit" value="Go" /> {/exp:search:simple_form} </li> <li> <h3>Mailing List</h3> <br /> {exp:mailinglist:form list="default"} <label for="mail">Join our Mailing List:</label> <br /> <input type="text" id="mail" name="email" value="{email}" /> <input class="button" type="submit" value="Go" /> {/exp:mailinglist:form} </li> </ul> </div>

faqs/submit

<!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>Submit a Question - 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>Submit a Question</h1> {exp:email:contact_form user_recipients="false" recipients="ed@example.com" charset="utf-8"} <br /> <label for="from">Your Email:</label><br /> <input type="text" id="from" name="from" size="40" value="{member_email}" /><br /> <br /> <label for="subject">Subject:</label><br /> <input type="text" id="subject" name="subject" size="40" value="FAQ Submission" /><br /> <br /> <label for="message">Message:</label><br /> <textarea id="message" name="message" rows="10" cols="80">Dear Ed & Eg:</textarea><br /> <br /> {if captcha} {captcha} <br /> <label for="captcha">Please enter the word you see:</label> <input id="captcha" type="text" name="captcha" value="" maxlength="20" /> <br /><br /> {/if} <input class="button" name="submit" type='submit' value='Submit Form' /> {/exp:email:contact_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>

faqs/friend

<!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>Tell a Friend - 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>Tell a Friend</h1> {if logged_out} <p>Sorry, you must be logged in to tell-a-friend.</p> {if:else} {exp:email:tell_a_friend charset="utf-8" allow_html='no' status="open|premium"} <br /> <label for="from">Your Email: </label><br /> <input type="text" id="from" name="from" size="40" maxlength="50" value="{member_email}" readonly="readonly" /><br /> <br /> <label for="name">Your Name: </label><br /> <input type="text" id="name" name="name" size="40" maxlength="50" value="{member_name}" /><br /> <br /> <label for="to">To: </label><br /> <input type="text" id="to" name="to" size="40" maxlength="50" /><br /> <br /> <label for="subject">Subject: </label><br /> <input type="text" id="subject" name="subject" size="40" value="Check this out!" /><br /> <br /> <label for="message">Message: </label><br /> <textarea id="message" name="message" readonly="readonly" rows="10" cols="80"> I saw the following question at {site_url} and thought you'd like it too: {faqs_question} Read the answer at {title_permalink='faqs/browse'}! </textarea><br /> <br /> {if captcha} {captcha} <br /> <label for="captcha">Please enter the word you see:</label> <input id="captcha" type="text" name="captcha" value="" maxlength="20" /><br /> <br /> {/if} <input class="button" name="submit" type='submit' value='Submit Form' /> {/exp:email:tell_a_friend} {/if} </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>

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} <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>

wiki/index

{exp:wiki base_path="wiki/index" wiki="money_saving_wiki" theme="azure"}

leonardmurphy.com

Building Websites with ExpressionEngine 2