Chapter 6, Building Websites with ExpressionEngine

Chapter 6: Members

Chapter 6 walks you through allowing members to self-register, creating a members-only area to our site, creating member groups and assigning permissions, setting up a stand-alone entry form and using mailing lists.

Updates/Errata

There are no updates or errata at this time.

Template Downloads

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

toast/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>Toast for Sale: {exp:channel:entries channel="toastwebsite" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"}{title}{/exp:channel:entries}</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>{exp:channel:entries channel="toastwebsite" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"}{title}{/exp:channel:entries}</h2> </div> <div id="content"> {exp:channel:entries channel="toastwebsite" limit="1"} {if (logged_out AND url_title!="promotions") OR logged_in} {if toastwebsite_introduction} <div class="contentinner">{toastwebsite_introduction}</div> {/if} {if toastwebsite_heading1} <h3>{toastwebsite_heading1}</h3> {/if} {if toastwebsite_text1} <div class="contentinner">{toastwebsite_text1}</div> {/if} {if toastwebsite_heading2} <h3>{toastwebsite_heading2}</h3> {/if} {if toastwebsite_text2} <div class="contentinner">{toastwebsite_text2}</div> {/if} <p class="footnote">Written by {author} on {entry_date format="%F %j%S"}</p> {if:else} <h3>Members Only</h3> <div class="contentinner"><p>Please log in to see our latest promotions. Not a member? Register today!</p></div> {/if} {/exp:channel:entries} </div> <div id="menu"> {embed="toast/.menu"} </div> </body> </html>

news/post_entry

{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> <title>Post to News from the President</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>Post to News from the President</h2> </div> {exp:channel:entry_form channel="{my_channel}" return="{my_template_group}/index" preview="{my_template_group}/post_entry"} <div id="content"> {preview} <h3>{title}</h3> <div class="contentinner"> {display_custom_fields} </div> {/preview} <h3>Title</h3> <input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" onkeyup="liveUrlTitle();" /> <h3>URL Title</h3> <input type="text" name="url_title" id='url_title' value="{url_title}" maxlength="75" size="50" /> <br /><br /> {formatting_buttons} <p class="footnote"><a href="{upload_url}" onclick="window.open(this.href, '_blank', 'width=400,height=600');return false;" onkeypress="this.onclick()">File Upload</a> | <a href="{smileys_url}" onclick="window.open(this.href, '_blank', 'width=600,height=440');return false;" onkeypress="this.onclick()">Smileys</a></p> {custom_fields} <h3>{if required}* {/if}{field_label}</h3> {field_instructions} {if textarea} <textarea id="{field_name}" name="{field_name}" dir="{text_direction}" cols="65" rows="{rows}" onclick="setFieldName(this.name)">{field_data}</textarea> {/if} {if textinput} <input type="text" dir="{text_direction}" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" onclick="setFieldName(this.name)" /> {/if} {if pulldown} <select id="{field_name}" name="{field_name}"> {options}<option value="{option_value}"{selected}>{option_name}</option>{/options} </select> {/if} {if date} <input type="text" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" onclick="setFieldName(this.name)" /> {/if} {if relationship} <select id="{field_name}" name="{field_name}"> {options}<option value="{option_value}"{selected}>{option_name}</option>{/options} </select> {/if} {/custom_fields} <br /><br /> <input type="submit" name="submit" value="Submit" /> <input type="submit" name="preview" value="Preview" /> </div> <div id="menu"> {embed={my_site_wide_templates}/.menu} <h4>Other Options</h4> {status_menu} <p><b>Status</b><br /> <select name="status"> {select_options} </select> </p> {/status_menu} <p><b>Date</b><br /> <input type="text" name="entry_date" value="{entry_date}" maxlength="23" size="25" /></p> <p><b>Expiration Date</b><br /> <input type="text" name="expiration_date" value="{expiration_date}" maxlength="23" size="25" /></p> <p><b>Comment Expiration Date</b><br /> <input type="text" name="comment_expiration_date" value="{comment_expiration_date}" maxlength="23" size="25" /></p> <input type="checkbox" name="allow_comments" value="y" {allow_comments} /> Allow Comments<br /> <input type='checkbox' name='dst_enabled' value='y' {dst_enabled} />DST Active on Date of Entry {category_menu} <p><b>Categories</b><br /> <select name="category[]" size="4" multiple="multiple"> {select_options} </select> </p> {/category_menu} </div> {/exp:channel:entry_form} </body> </html>

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; } #content{ font-size: 80%; width: 70%; float: left; } #content h3{ color: #F0E68C; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-bottom: 0px; } #content h3 a{ color: #F0E68C; } #content h3 a:visited{ color: #F0E68C; } #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; } .contentinner{ background: #DEB887; border: 2px dotted #FFEFD5; overflow: auto; width: 100%; } .innerbox{ margin: 5%; } .innerbox img{ float: left; padding-right: 5%; border: 0px; } .footnote{ color: #F0E68C; font-size: 75%; text-align: right; } .footnote a{ color: #F0E68C; } .footnote a:visited{ color: #F0E68C; } /* Formatting Buttons ------------------------------------------------------ */ .buttonMode { background-color: transparent; color: #73769D; font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif; font-size: 10px; white-space: nowrap; } .htmlButtonOutter, .htmlButtonOutterL { background-color: #f6f6f6; border-bottom: #333 1px solid; border-right: #333 1px solid; border-top: #333 1px solid; padding: 0; } .htmlButtonOutterL { border-left: #333 1px solid; } .htmlButtonInner { background-color: transparent; border-bottom: #ccc 1px solid; border-left: #fff 1px solid; border-right: #ccc 1px solid; border-top: #fff 1px solid; padding: 0 3px 0 3px; text-align: center; } .htmlButtonOff { font-family: Verdana, Arial, Trebuchet MS, Tahoma, Sans-serif; font-size: 11px; font-weight: bold; padding: 1px 2px 2px 2px; white-space: nowrap; } .htmlButtonOff a:link { color: #000; text-decoration: none; white-space: nowrap; } .htmlButtonOff a:visited { text-decoration: none; } .htmlButtonOff a:active { color: #999; text-decoration: none; } .htmlButtonOff a:hover { color: #999; text-decoration: none; } .htmlButtonOn { background: #f6f6f6; font-family: Verdana, Arial, Trebuchet MS, Tahoma, Sans-serif; font-size: 11px; font-weight: bold; padding: 1px 2px 2px 2px; white-space: nowrap; } .htmlButtonOn a:link { color: #990000; text-decoration: none; white-space: nowrap; } .htmlButtonOn a:visited { text-decoration: none; } .htmlButtonOn a:active { color: #999; text-decoration: none; } .htmlButtonOn a:hover { color: #999; text-decoration: none; } .htmlButtonA { font-family: Lucida Grande, Verdana, Geneva, Sans-serif; font-size: 11px; font-weight: bold; padding: 2px 3px 3px 3px; white-space: nowrap; } .htmlButtonB { background: #E1E3EC; font-family: Lucida Grande, Verdana, Geneva, Sans-serif; font-size: 11px; font-weight: bold; padding: 2px 3px 3px 3px; white-space: nowrap; } .htmlButtonA a:link { color: #000; font-weight: bold; text-decoration: none; white-space: nowrap; } .htmlButtonA a:visited { text-decoration: none; } .htmlButtonA a:active { color: #999; text-decoration: none; } .htmlButtonA a:hover { color: #999; text-decoration: none; } .htmlButtonB a:link { color: #990000; font-weight: bold; text-decoration: none; white-space: nowrap; } .htmlButtonB a:visited { text-decoration: none; } .htmlButtonB a:active { color: #999; text-decoration: none; } .htmlButtonB a:hover { color: #999; text-decoration: none; }

leonardmurphy.com

Building Websites with ExpressionEngine 1.6

Chapter 6: Members

Updates/Errata

Template Downloads

toast/.menu

toast/index

news/post_entry

toast/toast_css

Relevant Links

Book Chapters

Menu

Buy My Book!