This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2010
Production Reference: 1160910
Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849690-50-8 www.packtpub.com
Credits Author Leonard Murphy Reviewers Sarah Peterson
Editorial Team Leader Aditya Belpathak Project Team Leader Lata Basantani
Bob Sutton Project Coordinator Acquisition Editor
Sneha Harkut
Douglas Paterson Proofreader Development Editor
Lesley Harrison
Swapna Verlekar Production Coordinator Technical Editor
Alwin Roy
Kartikey Pandey Cover Work Copy Editor Leonard D'Silva Indexer Monica Ajmera Mehta
Alwin Roy
About the Author Leonard Murphy was one of the earliest adopters of ExpressionEngine when it was first released in 2004, and was the author of a series of free tutorials that helped other new users see what ExpressionEngine had to offer. The tutorials were a hit, and over the years, ExpressionEngine became more and more popular. So in 2008, Leonard expanded his tutorials into the first edition of Building Websites with ExpressionEngine. Two years later, with the release of ExpressionEngine 2, Leonard is back with a completely revised new edition. I would like to thank everyone who helped me with this book (and the companion first edition). The staff at Packt (including Sneha, Swapna, Kartikey, Lata, and Douglas) has been especially patient with me as I juggled the demands of work, writing, and a new baby. There are countless others at Packt that I don't work with directly but that I also know have contributed to this book—thank you all. Next, I'd like to give a big thank-you to my technical reviewers: Sarah Peterson and Bob Sutton. It is thanks to their meticulous and honest feedback that the book is as good as it is. Any errors, of course, remain completely and utterly my fault. I'd also like to acknowledge EllisLab and the wider ExpressionEngine community—I'm proud to be able to contribute to the community and appreciate all the support and encouragement I receive. Special thanks must go to Mark Bowen and Ron McElfresh. Next, I would like to thank my readers: I especially want to thank those who take the time to get in touch and let me know what they like or don't like, those who submit errata, as well as those who take the time to post about my book on their own website or in a review on Amazon. One of the great joys of writing a book is hearing from people from all over the world, and from all professions. Finally, and most importantly, I would like to thank my wife, Megan. There are not too many women who, in the final stages of their first pregnancy, would want to hear their husband say "Honey, right after you give birth, I was thinking I'd write a book…"
About the Reviewers Sarah Peterson is a Data Processing Specialist at Summit Credit Union in Madison, WI. She holds a Bachelors degree in Psychology and a Masters degree in Information Science, both from the University of North Carolina at Chapel Hill. Her interests lie in database design, report-building, and analyzing data to make it meaningful. She enjoys helping others to understand technology and use it to enhance their lives. I would like to thank my parents, Karen and Larry Peterson, for their unwavering support, and my roommate, Melissa, for accompanying me to the coffee shop while I was working on this book. I would also like to thank Leonard for the opportunity to contribute to this edition.
Bob Sutton is a U.S.-based web developer and content management software expert and owns Villagewerx, www.villagewerx.com, a web agency specializing in original, accessible designs, crisp copy, compelling calls-to-action, and measurable ROI. A member of the EllisLabs community since 2002, Bob implemented his first commercial ExpressionEngine website in 2004 and advises clients ranging from businesses and institutions to social advocacy groups and political organizations. During his prior 24-year career with leading developers of corporate IT systems, Sutton managed marketing and consulting practices serving global banking, media, and services companies, and lent enterprise sales expertise to emerging software innovators, including Oracle Corporation and Verity. He has written and spoken extensively on topics related to data management software and search/information retrieval technologies. An avid sailor and fisherman, Bob shares numerous inshore and offshore prizes as a racing navigator/tactician. Nearly everything I've learned about ExpressionEngine started with a kind word from Lisa Wess or a knowing wink from Sue Crocker, longtime EllisLabs forum leaders. To them and to many others in the EE Community, I'm much obliged for your generosity and encouragement.
Dedicated to Dexter
Table of Contents Preface Chapter 1: Introduction to ExpressionEngine What is a content management system? Introducing ExpressionEngine How does ExpressionEngine compare? The business case The technical case Who is this book intended for? Who is this book not intended for? What can you expect from this book? New in this edition Further reading and resources
1 7
7 9 11 12 12 13 13 14 15 15
Chapter 2: Getting Installed
19
Chapter 3: The ExpressionEngine Tour
37
What do you need to get started? Assumptions Setting up the ExpressionEngine database Downloading the ExpressionEngine files Uploading the ExpressionEngine files Installing ExpressionEngine Logging into the control panel Creating user-friendly URLs Hiding the index.php in ExpressionEngine URLs Renaming index.php in ExpressionEngine URLs Summary Agile Records Inside the control panel Tab Manager
20 20 21 22 23 24 29 31 32 34 35 37 38 40
Table of Contents
Notepad Quick Links Manager Control panel themes Creating content Templates and URLs Creating your first template Using tags to display content in your templates Challenges Summary
Chapter 4: Moving a Website to ExpressionEngine Introducing Ed & Eg Deciding upon an approach Designing and building your channel Custom statuses Categories Custom fields Creating a custom field group Creating your first custom field Creating your second custom field
41 42 42 44 50 53 55 59 59
61 61 62 63 64 64 64 65
66 70
Creating a new channel Creating the content for our channel Creating templates Pointing your template to your channel Adding more pages
73 75 78 82 84
Avoiding repetition Preload text replacements User-defined global variables Snippets
90 91 92 93
Embedded templates Creating a 404 Page not found Templates as files Challenges Summary
96 98 99 101 101
Publishing a second page Creating a second template Going live
Creating a menu
86 88 89
95
Chapter 5: Creating a Fully-Equipped Channel Designing your channel Creating your custom channel fields Creating your categories
[ ii ]
103 104 105 108
Table of Contents
Creating your new channel Publishing your first set of questions Creating your FAQ templates Creating your single-entry page Allowing comments on your entries Preventing comment spam Creating a comment form Allowing visitors to preview comments Organizing your data with categories Displaying categories with your entries Distinguishing your category browsing page Displaying related entries by category The FAQ snippet Setting up an RSS or Atom feed Improving your 404 Page Challenges Summary
Chapter 6: Members
Designing your membership Membership preferences Registering as a new member
Linking to the member templates Introduction to member groups Creating a member group Creating a member
152 154 155 160
Modifying the Publish page layout Creating member-only content Making content visible to members only Challenges Summary
162 166 167 171 172
Logging in as Editor Ed
Chapter 7: Creating a Calendar
Designing the calendar Setting up your channels Creating custom fields for event sponsors Creating the event sponsors channel Creating the events custom fields Creating the events channel Creating example events [ iii ]
160
173 173 174 174 175 176 177 177
Table of Contents
Creating the calendar Creating a blank calendar template Creating the calendar Formatting the calendar with CSS
179 179 180 183
Setting up FancyBox Creating your single-entry template Displaying events on your calendar Challenges Summary
187 188 191 195 196
Creating the calendar CSS template Adding styles to your calendar CSS
Chapter 8: Creating a Photo Gallery Designing your photo gallery File manager Creating your photo gallery channel Creating your custom fields Creating your categories Creating your channel Uploading your first photos Creating your templates Creating the single-entry page Creating the multiple-entry page Adding content to your multiple-entry page
The Search module Adding a search box to your site Creating a search results template The no-results template Advanced search The Mailing List module Setting up the Mailing List Allowing members to sign-up Sending e-mails The Email module Creating a contact form [ iv ]
183 184
199 199 200 203 203 205 207 207 209 210 213
215
221 223 223 224 224 225
227 228 229 231 234 235 236 236 238 239 241 241
Table of Contents
Creating a tell-a-friend form
244
Creating the tell-a-friend template
244
The Moblog module
248
Setting up your template Sending a Moblog e-mail The Wiki module Setting up the wiki How does the wiki work? Other ExpressionEngine modules Multiple Site Manager Summary
252 253 255 255 257 259 260 261
Setting up the Moblog module
248
Chapter 10: Extending ExpressionEngine Backups and restores Backups Database restores Upgrading ExpressionEngine ExpressionEngine add-ons Types of add-ons Modules Accessories Extensions Field types Plugins
Third-party add-ons and add-on developers Pixel & Tonic Solspace Newism (Leevi Graham) Low (Lodewijk Schutte) nGen works
Other notable add-ons Optimizing ExpressionEngine Spam Performance Summary
263 263 263 266 267 271 271
272 272 273 274 274
275
275 276 276 277 277
278 279 280 281 283
Appendix A: Installing WampServer
285
Appendix B: Solutions to Exercises Index
293 303
Installing WAMPServer Using WampServer Allowing .htaccess files to be used Summary
[v]
286 289 291 292
Preface ExpressionEngine is a content management system designed to make it easy to manage engaging, interactive websites for your visitors. This book provides step-by-step directions to take you from the basics of setting up ExpressionEngine to building a fully functional ExpressionEngine website. You will learn how to enhance your website so you can accept comments, allow members to register, create news feeds, mark content as member-only, build an events calendar, display your photos in a photo gallery and set up mailing lists your visitors can signup for. In the process, you will quickly become familiar with the ExpressionEngine control panel; learning how to use templates, channels, categories, custom fields, status groups, snippets and variables like an expert. Each chapter is packed with hints and tips so that you can become truly confident using ExpressionEngine.
What this book covers
Chapter 1, Introduction to ExpressionEngine introduces you to ExpressionEngine – what it is, what it can do, and how it compares to other content management systems. Chapter 2, Getting Installed walks you through installing and configuring ExpressionEngine, including renaming the system folder and removing or renaming the index.php file that appears in ExpressionEngine URLs. Chapter 3, The ExpressionEngine Tour provides a short tour of the ExpressionEngine control panel, with an introduction to channels and templates. Chapter 4, Moving a Website to ExpressionEngine walks you through setting up a website in ExpressionEngine, with an introduction to embedded templates, snippets and global variables.
Preface
Chapter 5, Creating a Fully-Equipped Channel takes what you have learned one step further, creating a more advanced channel with content organized by category. You will learn how to allow comments on your channel entries and how to create a news feed. Chapter 6, Members provides an overview of all the member functionality that comes with ExpressionEngine. You will learn how to set up member groups, how to customize the Publish page and how to create member-only content. Chapter 7, Creating a Calendar shows you how to build an events calendar in ExpressionEngine, using a jQuery lightbox to display information about events when they are clicked. The concept of Related Entries is also introduced. Chapter 8, Creating a Photo Gallery shows you how to build a photo gallery in ExpressionEngine, using channels, categories and the jQuery module. An overview of the file manager and native image editing functionality within ExpressionEngine is also provided. Chapter 9, Beyond the Basics introduces many extra modules that come bundled with ExpressionEngine. You will learn how to set-up mailing lists your visitors can opt into, how to enable searching on your website, how to create a contact form and a tell-a-friend form, how to start a wiki and how to post channel entries from your phone. Chapter 10, Extending ExpressionEngine talks you through many of the essentials that come with running an ExpressionEngine website: how to back-up (and restore) your database and how to upgrade the software. You will also learn about some of the best free and commercial add-ons available. Appendix A, Installing WampServer walks you through setting up WampServer, so that you can run ExpressionEngine locally rather than following along on an actual website. Appendix B, Solutions to Exercises gives you answers to the exercises that are found at the end of most chapters.
What you need for this book
To follow along with the examples in this book, you need a copy of ExpressionEngine (Commercial, Non-Commercial, or Freelancer) and a computer (or website) where you can install it. If you are using the Freelancer license, bear in mind that the chapter on Members will not apply.
[2]
Preface
So that you can install ExpressionEngine on your own computer, Appendix A provides instructions for how to install WampServer (a free and open source Apache, MySQL, PHP software package). XAMPP or MAMP (for Mac OS) are both suitable alternatives. In Chapter 8, Creating a Calendar and Chapter 9, Creating a Photo Gallery, the FancyBox jQuery plug-in is used. Instructions on how to download and install this are included in the chapter.
Who this book is for
This book is ideal for new users of ExpressionEngine. The book is targeted at people who are responsible for creating and managing a website. If you are familiar with building websites using HTML/CSS or with software such as DreamWeaver or with other content management systems such as Drupal, WordPress, Joomla! or Plone, then ExpressionEngine may be what you are looking for. This book is suitable for web developers, designers, content editors, technology professionals, business owners, and marketing professionals who want to develop a fully featured web presence with a simple and straightforward tool. No prior knowledge of content management systems, PHP or ExpressionEngine is assumed. A basic understanding of HTML is necessary to follow the examples.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text are shown as follows: "Since the example website used in this book is a small business website, you will remove the index.php" A block of code is set as follows: My Channel Content <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
[3]
Preface
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: My Channel Content <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "In most FTP clients, you can simply right-click on the directory and select Delete".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to [email protected], and mention the book title via the subject of your message. If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail [email protected]. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
[4]
Preface
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase. Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub. com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub. com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at [email protected] if you are having a problem with any aspect of the book, and we will do our best to address it. [5]
Introduction to ExpressionEngine ExpressionEngine is a content management system that is designed to manage websites. This chapter will briefly review what ExpressionEngine is and what it can do for you.
What is a content management system?
A content management system (CMS) is software designed to make it easier to build and maintain a website. It acts as an interface between the database where your content is stored and the pages that your visitors see—providing an easy way for content to be added to your database and an easy way to retrieve the content and display it on your website. A website has three parts to it: 1. The CSS stylesheet specifies how different components of your website should be styled—you can define margins and paddings as well as what colors and fonts to use. 2. The HTML code lays out the page. This code indicates where different components are and which styles from the stylesheet should be applied to them. 3. Finally, there is the content itself—the images, headings, and text that appear on your website.
Introduction to ExpressionEngine
Before content management systems came along, you either needed a database programmer or you had to have a static website with all your content stored in the same file as the HTML that lays out the page. For a small website, this is perfectly feasible. To update the website, you simply update the files and upload them to your server. However, even with small websites, the person who creates the website is often not the person who needs to make updates to the site. With the content of the website and the HTML code intermingled in the same file, it is difficult to update the content without understanding the code. Due to this, the person who builds the website is often still called upon to make even minor adjustments, long after the website is built. This is not always practical, and so the site is not updated as much as it could be.
A good content management system makes it easier to update the website without any knowledge of the HTML that designs and formats the page. The person who creates the website still needs to know HTML in order to design the page, but the person who updates the website does not. Since the website is easier to update, the site changes more frequently, visitors come back more often, and the site becomes more popular.
[8]
Chapter 1
A content management system can also turn your website from a one-way flow of information (you write the content, the visitors read it) into a more conversational website. Not only are visitors reading the content you wrote, they can add their own comments into the mix. Your site becomes dynamic, changing even when you are not around. To illustrate the difference between a static and dynamic website, consider a news website. If, every day, the site had the same articles, you would stop visiting. Why would you read an article you have already read? To keep visitors coming back, it pays to keep the content of your website dynamic. If there is always something new to read, there is more incentive for your visitors to keep coming back.
Introducing ExpressionEngine
ExpressionEngine makes it easy to separate the HTML code from the content of your website. Once the design of your website is built, you can add new content to the website simply by filling in a web form, which then automatically saves the content to your database. It is easy enough that anyone can learn to do it.
[9]
Introduction to ExpressionEngine
The HTML code that formats the pages exist in templates. However, instead of having paragraphs of content inside these templates, like you would in most HTML files, your content is stored in a database and retrieved dynamically using special ExpressionEngine tags. These tags simplify the process of accessing the database, making it easy to build a database-driven website without any knowledge of database programming.
This separation of the HTML that builds the website from the content that is displayed on your website makes it much easier for the website designer to update the design without any risk of accidentally changing the content, and makes it easier for someone else to update the content without any knowledge of the HTML that builds the website. With that said, ExpressionEngine also brings value even when you are building your own website. With HTML files, every time you want a new page, you have to create a new file. In ExpressionEngine, one template can be used to generate hundreds of pages of content on your website, with ExpressionEngine using the URL to determine what content to display. Furthermore, snippets and global variables allow you to re-use design elements across multiple templates. Reducing repetition in this way makes it easier for you when there are updates—if the logo changes, you only have one place to update, instead of hundreds of individual pages. In addition, ExpressionEngine makes it easy to implement advanced features such as RSS feeds, a photo gallery, a mailing list, or a calendar. You can allow visitors to leave comments, or join your site as members.
[ 10 ]
Chapter 1
Finally, ExpressionEngine comes packed with industry-leading features to keep your website secure and spam-free. You can require people to register as members before they can submit comments to your site, you can personally review every comment before it appears on your website, or you can allow non-members to submit a comment if they type in a CAPTCHA correctly (a CAPTCHA is a randomized image of letters that a person must correctly type in order to submit data; it ensures that it is not an automated spambot that is submitting the data).
Furthermore, you can prevent people from submitting the same comment twice, restrict how much data one person can request from your website in a certain timeframe (to prevent denial of service attacks), blacklist certain words so they cannot be used in comments, and blacklist URLs or IP addresses of spammers that you do not want accessing your site.
How does ExpressionEngine compare?
ExpressionEngine is not the only content management system on the market, and indeed, it is often compared side-by-side to open source and other free CMS/ blogging tools. A question that is often asked on the forums is why should you pay for ExpressionEngine if you can get another tool for free? The bottom line is that there is a lot more to the cost of building a website than the cost of the software. When you take into account all the hidden costs, ExpressionEngine provides excellent value for money.
[ 11 ]
Introduction to ExpressionEngine
The business case
Although ExpressionEngine is not free, it is very reasonably priced for the features (especially for a non-commercial license). The fee goes to support future development as well as software support via the forums. EllisLab employs a number of dedicated technical support specialists in a number of time zones who all diligently monitor the support forums. For you, this means that the response times are very good and there will be support when you need it. (If you are looking at a free alternative, you will often find support is provided on a volunteer-only basis or that the cost for commercial support far exceeds that of an ExpressionEngine license). If you are a business choosing a content management system, it is reassuring to know that EllisLab is a company in it for the long haul. To stay in business, they need to keep ExpressionEngine attractive to new and existing users—by delivering a robust product that works, by providing world class support, and by developing innovative features that people want. ExpressionEngine also has a vibrant and growing developer community, building add-ons that further extend the functionality in many ways (See Chapter 10, Extending ExpressionEngine for key ExpressionEngine add-ons). Many add-ons that are available are commercial-grade applications in their own right, easy to install, and complete with support so you can feel confident using these add-ons without the feeling that you are somehow hacking ExpressionEngine. ExpressionEngine 2's base in CodeIgniter (a respected open source PHP framework also created by EllisLab) has further increased the pool of developers, which is resulting in more and more high-quality add-ons. Generally speaking, if the core features of ExpressionEngine lack something you would like to see, someone else may have already thought of it and built an add-on that would meet your needs. If you need something a little more specific (that would not appeal to most users), ExpressionEngine maintains a Pro Network listing of ExpressionEngine experts that you could approach (http:// expressionengine.com/professionals/) and there is also a job board forum where you can post your needs. The bottom line is that ExpressionEngine is a solid choice for businesses and individuals looking to balance value for money with a high-quality product from a company that will be around for a long-time to come.
The technical case
You can always identify the best tools of a trade by looking at what the professionals in that trade use. ExpressionEngine is hugely popular among website developers and designers. Many web design businesses use ExpressionEngine for their clients almost exclusively, and the reason for this is simple—ExpressionEngine does not get in the way. [ 12 ]
Chapter 1
Other tools make it difficult to make your website your own. For example, they might make it easy to create an initial website (that looks like everyone else's), but then you have to invest a lot of time learning how to tweak the site to meet your needs (in addition to the time spent learning the software itself). With ExpressionEngine, you are free to design any website you can imagine. If you look through the showcase of ExpressionEngine-powered websites (http:// show-ee.com/) one thing that will stand out is that no two websites look the same. ExpressionEngine allows you to code a website using all the tools of the trade (HTML, CSS, JavaScript, and PHP), and then enhance that website by providing additional functionality that would be difficult to build from the ground up.
Who is this book intended for?
If any of the following sounds familiar, then this book is for you: •
You have used HTML and CSS to build websites before and you are comfortable editing HTML and CSS by hand.
•
You have never used ExpressionEngine before. This book is a tutorial book, designed for new users of ExpressionEngine and will walk you step-by-step through everything you need to do.
•
You want to build an interactive, feature-packed website.
•
You want to get started using ExpressionEngine as fast as possible and you do not have time for lots of reading. This book takes a very hands-on approach and will get you using ExpressionEngine quickly.
Who is this book not intended for? This book is not necessarily for you if: •
You have never written an HTML web page before, but you want your own website. This book is focused on how to use ExpressionEngine, not on how to write HTML. Although you may be able to follow the book's step-by-step instructions, knowledge of HTML/CSS will allow you a better appreciation of how the example website is put together.
•
You want to learn advanced website building techniques and technologies such as AJAX, JavaScript, or PHP. This book does not set out to teach these things. However, anything that you learn from other books and tutorials on these subjects can be easily applied to a website powered by ExpressionEngine. The sky is the limit. [ 13 ]
Introduction to ExpressionEngine
•
You have extensive experience in ExpressionEngine, but want to learn advanced tips and tricks such as add-on development. This book is intended as an introduction for new users to ExpressionEngine. That said, experienced users may pick up some new ideas or ways to do things—every ExpressionEngine user does things slightly differently.
•
You want a definitive guide to ExpressionEngine. As a printed book, it is almost a given that ExpressionEngine will have changed since this book was written. This book is meant more as a springboard into your own exploration of what ExpressionEngine can do and does not attempt to cover every available feature.
What can you expect from this book?
As with anything, you will learn ExpressionEngine best by using it. That is where this book comes in. By working through these tutorials on your own installation (particularly the first few chapters), you will gain practical insights into how ExpressionEngine can be used to build a website. Each chapter has step-by-step instructions; not a mouse click is missed. This makes it easy to follow-along and understand everything that you are doing and why you are doing it. At the end of each chapter, there are exercises. These exercises are not designed to be particularly difficult, but rather to encourage you to problem-solve for yourself. Once you have completed the exercises, feel free to compare your solution with the suggested solution in Appendix B. You never know—you may even find a better solution on your own than that proposed at the back of the book! Note that taking a step-by-step approach means that each chapter is not comprehensive—it does not tell you all the possibilities that could be. There are always multiple ways to the same solution and often the best way will vary depending on the individual site. Although the book will provide guidelines and best practices, the reality is that one template and template group structure might work great for a website with a small amount of content, but become unmanageable for a very large website. Likewise, the structure required for a very large website might be overkill if you only have a small amount of content. There is no one-sizefits-all solution. The aim of this book is to equip you with the basic training you need to venture out into the documentation or the forums and feel confident asking for help and experimenting with different ideas.
[ 14 ]
Chapter 1
This book uses the example of building a website for a small business. The website starts out as a static HTML website. Over the course of the book, you will step through how to convert the website into ExpressionEngine and enhance it—rewriting the FAQs section to be more dynamic, allowing comments, setting up members-only content, adding a calendar, a photo gallery, a mailing list, and a search form. By the time you are done, the website will be barely recognizable from where you started.
New in this edition
ExpressionEngine 2 is a big update from ExpressionEngine 1.6. This book is also a big update from the first edition. First and foremost, the example site has changed to look and feel more professional—and more like a website you might want to build. The example website is adapted from a design by Free CSS Templates (http://www. freecsstemplates.org) and is released under a Creative Commons Attribution 2.5 license. In the first edition of this book, a lot of valuable space was taken up describing HTML or CSS code. In this edition, much of the HTML and CSS will simply be provided rather than explained line-by-line, giving this edition more of a focus on ExpressionEngine itself. Finally, ExpressionEngine 2 comes with many features that did not exist in ExpressionEngine 1.6. For example, with the introduction of snippets, how you might design and construct a website has changed. In addition, the control panel has been completely re-designed with new tools (such as an integrated file manager with built-in image-editing tools). Rest assured that this new edition has been completely re-written to show you how to work with these new features—it is not simply the first edition of the book with updated screenshots. After working through this book, you will be a pro at taking advantage of everything ExpressionEngine 2 has to offer. Enjoy!
Further reading and resources
While reading this book, you may want further information on a particular feature. Some of the most important resources are: •
http://www.expressionengine.com/user_guide: The ExpressionEngine documentation is very comprehensive and it should be your first port of call when you want to learn more about a feature or tag.
[ 15 ]
Introduction to ExpressionEngine
The ExpressionEngine documentation is always for the latest version. If there is any discrepancy between what you are seeing and what the documentation says, make sure that you are running the latest version of ExpressionEngine.
•
http://expressionengine.com/forums: If you have a question or need support on any aspect of ExpressionEngine, then this is the place to come. The forums are staffed by paid support representatives of EllisLab, as well as by hundreds of helpful members of the ExpressionEngine community. To get the best results from the ExpressionEngine forums, always search the forums first in case your question has already been answered. When posting a question, include as much detail as possible regarding what you are trying to achieve—include your template code and/or a link to your website, if possible.
•
http://www.eeinsider.com/: Ryan Irelan is a noted ExpressionEngine
•
http://devot-ee.com/: From Masuga Design, this website is the official onestop shop for all ExpressionEngine-related add-ons.
•
http://show-ee.com/: The ExpressionEngine showcase shows you the
•
http://mijingo.com/: Another website from Ryan Irelan. This one focuses on providing ExpressionEngine training resources. The EE Screencasts have long been a popular resource for new and experienced users alike. Ryan also has an ExpressionEngine 2 book available.
•
http://train-ee.com/: Michael Boyink's website is another source of tutorials, screencasts, and classes on all aspects of ExpressionEngine. Michael also has an ExpressionEngine 2 book available.
•
http://5by5.tv/eepodcast: The EE Podcasts are weekly videos discussing
•
http://eetemplates.com/ and http://www.woothemes.com/themes/ ee-templates/: Both these sites provide professionally designed website
expert and this website is the best resource for ExpressionEngine-related news and information (aside from expressionengine.com).
huge variety of sites that have been built using ExpressionEngine and is a great place to get inspired.
different aspects of ExpressionEngine. They are a great source of ideas and best practices.
templates for ExpressionEngine—useful if you need a jump-start on getting a website up and running. [ 16 ]
Chapter 1
•
http://director-ee.com/: This website is a directory of ExpressionEngine users and is a useful tool if you want to find ExpressionEngine developers in your area.
•
http://eehash.com/: This website is a compilation of ExpressionEngine
•
http://codeignitor.com/: CodeIgnitor is the open source PHP framework on which ExpressionEngine is based.
•
http://mojomotor.com/: MojoMotor is EllisLab's newest product—a content management system that is less powerful and has less features than ExpressionEngine, but that allows you to edit your website content directly on your website (without a control panel). It is ideal for smaller websites and includes an upgrade path to ExpressionEngine, if you find your needs outgrow what MojoMotor can do.
•
http://www.enginehosting.com/: EngineHosting is EllisLab's website hosting service and specializes in providing both shared and dedicated hosting packages for sites running ExpressionEngine (as well as other dynamic web applications).
news and articles from all the major ExpressionEngine websites, as well as from plenty of smaller websites that feature articles on ExpressionEngine.
Last, but not least, you can download the code and other files required to follow along in this book, and you can view a working example of the example website used in this book at http://www.leonardmurphy.com/book2/. Let's get started!
[ 17 ]
Getting Installed Before you can do anything else with ExpressionEngine, you have to install it. In this chapter, you will walk through the installation process. Following the completion of this chapter, you will be able to: •
Create a database for ExpressionEngine using phpMyAdmin
•
Install ExpressionEngine
•
Mask the true location of the ExpressionEngine files by changing where you log in to the control panel
•
Use .htaccess to keep your ExpressionEngine's URLs more user-friendly (optional) Please note that this chapter is for brand-new installations only. If you already have ExpressionEngine installed (either 1.x or 2.x), you should follow the appropriate updating instructions at http://expressionengine.com/user_guide/#install_ docs. There are different instructions depending on whether you are upgrading from 1.x or an earlier 2.x version.
Throughout this chapter, you will also want to refer to the official installation guide at http://expressionengine.com/user_guide/installation/installation.html. If you encounter any difficulties during installation, you can seek help at http:// expressionengine.com/forums.
Getting Installed
What do you need to get started?
ExpressionEngine has certain minimum requirements that can be found at http:// expressionengine.com/user_guide/requirements.html. These include: •
PHP version 4.3 or newer
•
MySQL version 4.1 or newer
•
10 MB of free space on your server
•
2 MB of free space in your database (more will be needed as your site grows)
If you have not yet purchased ExpressionEngine and are unsure as to whether your hosting provider meets the requirements, there is a Server Wizard available at the above URL that can be uploaded to a host server to make sure that ExpressionEngine will work. Although ExpressionEngine can run on either Windows IIS or Apache, this book will assume the use of Apache. In Appendix A, you walk through how to set up a test Apache and MySQL environment with WampServer. Other test Apache and MySQL environments that ExpressionEngine will run on include XAMPP and MAMP (for Mac OS). Using a test environment, such as these, allows you to explore ExpressionEngine without having to worry about the nuances that can exist between different hosting providers. For the optional section on creating URLs without index.php in them, there are additional requirements: •
Your hosting server must run Apache
•
Your hosting server must have mod_rewrite enabled
If this is not the case for your server, you can skip this section—ExpressionEngine will still work. If you are using WampServer, see appendix A for details on how to set this up.
Assumptions
In order to keep the instructions in this book as simple as possible, it is assumed that your website is located at http://localhost/. If you are following along on a hosted website, your site will be located at an address such as http://www. yourdomain.com/. Wherever you see http://localhost/, substitute your actual website name.
[ 20 ]
Chapter 2
In this chapter, it is also assumed that you are using WampServer, and therefore your website files are located in C:\wamp\www\. If you are using MAMP for Mac OS X, then the equivalent location might be /Applications/MAMP/htdocs/. If you are using XAMPP, the directory might be C:\xampp\htdocs. If you are using virtual hosts (such as VirtualHostX for Mac OS X) to allow more than one development website at a time, then the location of the files for the website will depend on the directory defined as the document root for that domain.
Setting up the ExpressionEngine database
If you are using a shared hosting server or a dedicated web server, your host may have provided you with a limited number of MySQL databases which are already established for you. In that case, you do not need to follow this section to set up a database from scratch. Instead, your hosting provider will have provided you with the following: 1. The MySQL database name 2. The MySQL server address 3. The MySQL username and password If you are using WampServer, XAMPP, MAMP, or if your host allows you to create your own databases, you will require phpMyAdmin to create a database for ExpressionEngine. phpMyAdmin is a free MySQL database management tool, providing the ability to create, drop, and manage MySQL databases. 1. First, navigate to phpMyAdmin (which comes installed with WampServer). If you are on a hosted web server, your host will be able to tell you how to access phpMyAdmin. In WampServer, navigate to http://localhost/ phpmyadmin/ to access phpMyAdmin. 2. In the left-hand column, there should be a text box that says Create new database. (If there isn't, your host may have disabled your ability to create new databases; contact them for support). You are going to call your database ee. Then click on Create.
[ 21 ]
Getting Installed
3. You are then brought to your database screen. Notice on the left-hand side that no tables have been found in the database. This is because the tables are created when ExpressionEngine is installed. Next, you are going to create an ExpressionEngine username. Select SQL from the top menu.
4. Next, type in the following command to create a new user eeuser with a password of password that has all rights to the ee database. (If you are setting up a database on a public-facing web server, you will want to choose a more secure password). Click on Go. GRANT ALL PRIVILEGES ON ee.* TO eeuser@localhost IDENTIFIED BY 'password' WITH GRANT OPTION
5. You should then see a message Your SQL query has been executed successfully. If so, you can click the Privileges tab to verify that eeuser has been set up and has access to the ee database. Your database is now set up and you are ready to begin installing ExpressionEngine! The following information will be needed: 1. MySQL Database Name: ee 2. MySQL Server Address: localhost 3. MySQL Username: eeuser 4. MySQL Password: password
Downloading the ExpressionEngine files
The first step in installing ExpressionEngine is to download the latest version of ExpressionEngine and rename the system directory. 1. If you have an existing website, be sure to back it up. 2. Once purchased, ExpressionEngine is available as a ZIP file download from the My Downloads section of the expressionengine.com website. Download this ZIP file and then extract the files.
[ 22 ]
Chapter 2
When in the My Downloads section, make a note of your license number. You will need it later in the installation process.
3. Inside the extracted ExpressionEngine2.x.x directory is a subdirectory called system. As the name suggests, this directory contains the important files for running ExpressionEngine. Rename this directory to something that is known only to you, and which can't be easily guessed to make it harder for someone to locate your ExpressionEngine system files.
Throughout this book, this directory will still be referred to as 'system'. Whenever there is a reference to the word system, substitute the name you have chosen in this step.
Uploading the ExpressionEngine files You now want to copy all the ExpressionEngine files to your server.
If you are installing to a web server where an existing website is running (with a plan to transition your website to ExpressionEngine), you will want to ensure that you do not overwrite any existing files when you upload ExpressionEngine (if your existing website already has an index.php file, see the section at the end of the chapter called Renaming index.php in ExpressionEngine URLs). Even if there are no file conflicts, you may need to create a .htaccess file with a DirectoryIndex line that ensures the filename of your home page (such as index.html) is returned ahead of ExpressionEngine's index.php (such as, DirectoryIndex index.html index.php). 1. If using WampServer, you can simply copy and paste all the files and directories in the extracted ExpressionEngine2.x.x directory to C:\wamp\ www\ (do not copy the ExpressionEngine2.x.x directory itself). If using FTP to upload to an actual website, upload the files in Auto mode, except for / system/expressionengine/fonts/texb.ttf which should be uploaded in binary mode.
[ 23 ]
Getting Installed
If installing to a live web server, consider following the instructions in the ExpressionEngine 2 documentation (http:// expressionengine.com/user_guide/general/system_ above_webroot.html) to run the system directory above webroot. This provides an extra layer of security beyond renaming the system directory (but is not necessary when using WampServer).
2. Next, if installing on a web hosting server, you need to change the permissions of the following files. (When using a localhost environment, you do not need to do this). In most FTP clients, right-click on the file to change the permissions. The following files must be set to 666 on a Unix server or set as writeable on a Windows server. 666 means that the owner, group, and the public can read and write to these files. /system/expressionengine/config/config.php /system/expressionengine/config/database.php
3. You also need to set the permissions on the following directories to 777 on a Unix server or set as writeable on a Windows server. The permission setting 777 means that the owner, group, and the public can read, write, and execute the files in these directories. /system/expressionengine/cache/ /images/avatars/uploads/ /images/captchas/ /images/member_photos/ /images/pm_attachments/ /images/signature_attachments/ /images/uploads/
Installing ExpressionEngine
Now that the ExpressionEngine files are in place and the permissions have been set, you are ready to install ExpressionEngine. This is done entirely in a web browser. 1. First, navigate to the system directory (http://localhost/system) and click on Click here to begin! If you see an error message that says your config file does not appear to be formatted correctly, be sure your URL includes the system directory.
[ 24 ]
Chapter 2
2. On the next page, the pre-installation tests should show as successful with no errors. If this happens, click the link to install a brand new copy of ExpressionEngine. 3. Next, select the option I agree to abide by the license Terms and Conditions as stated above and click on Submit.
4. You will now be prompted for various settings. Enter your license number (if you did not make a note of it earlier, there is a direct link for you to go to the download area of expressionengine.com and grab it).
5. Server Settings will pre-fill many of the fields correctly. The index page of the site is index.php. The URL of the site is the domain (http:// localhost/). If you installed ExpressionEngine to a subdirectory, the URL will include the subdirectory. Enter your e-mail address as the webmaster. Select Unix as the type of server. You would normally know if your web server is Windows rather than Unix-based. [ 25 ]
Getting Installed
Please ensure that the URL to the directory where the index page is located includes the trailing slash (/). For example, use http:// localhost/ rather than http://localhost. Although this is not required for ExpressionEngine to run, in later chapters, you will be using the site URL as the basis of menu links, so having it formatted with the trailing slash will make it easier to follow along.
6. At the beginning of this chapter, you established the Database Settings for your test environment, which were 'localhost' for the SQL Server Address, 'eeuser' for the SQL Username, 'password' for the SQL Password, and 'ee' for the SQL Database Name. If you are installing on a web server, your hosting provider would have provided the settings for your website. Enter the server address (usually an IP address or localhost), username, password, and database name. You can leave the Database Prefix as exp, and the Database Connection as non-persistent.
[ 26 ]
Chapter 2
7. Choose the username, password, e-mail address, screen name, and site name to Create your Admin Account in ExpressionEngine. These can be anything, but do not forget the username or password! 8. Choose Agile Records as your default template design.
[ 27 ]
Getting Installed
9. When you select Agile Records, it will automatically check certain optional modules. Do not uncheck any that are checked. At this point, you do not need to check any additional modules either—during the course of this book, you will install what you need when you need it (though it will not do any harm if you do want to install something now).
10. Finally, under Localization Settings, select your time zone and whether you are observing Daylight Saving Time (summer time). If you are installing on a hosted server, enter the timezone of the server here (if you know it). 11. When ready to proceed, hit Install ExpressionEngine! A success page with two links should then load—one link will go to the control panel (where you can manage your new website) and the other to your new ExpressionEngine website.
12. Before you can log into your ExpressionEngine site, you must delete the /system/installer directory from the server—until you do so, the URL to the control panel will always send you back to this page. In most FTP clients, you can simply right-click on the directory and select Delete. [ 28 ]
Chapter 2
13. Finally, follow the link to your website (http://localhost/index.php). It should look like the following screenshot.
Logging into the control panel
You have already taken steps to mask where your installation files are by renaming the system directory. Taking this one step further, you can change where you log into the control panel, so that you do not reveal your installation directory when you give others access to the control panel. 1. Copy the file /system/index.php and rename the copy to admin.php. 2. Move the copy to the root of the ExpressionEngine website.
[ 29 ]
Getting Installed
3. Next, using a text editor such as Wordpad, open admin.php and search for the line $system_path = "";. Inside the double quotes, type ./system (replacing system with the name you chose for your system directory). Then save and close the file. 4. Now try logging in to the control panel by pointing a browser at http:// localhost/admin.php and using the username and password chosen during installation. If, instead of the username/password prompt, you get a message that says that your system folder path does not appear to be set correctly, try step 4 again. The line should look like $system_path = "./ system"; (where system reflects whatever name you chose for your system directory).
5. Once you are logged in, you should see the control panel home page. You will come back to this in the next chapter—the important step here is to ensure that you can access it!
[ 30 ]
Chapter 2
Creating user-friendly URLs
Every ExpressionEngine page includes index.php in the address such as http:// localhost/index.php/about or http://www.example.com/index.php/about. Users of ExpressionEngine have mixed feelings regarding this. In general, websites with a lot of content almost always have URLs that are not easy to remember and type directly—often containing meaningless strings of characters and numbers that could be tracking any number of things. (Look at the URL next time you browse a Facebook photo album or an article on a news website). When compared to this, ExpressionEngine URLs are very user-friendly, even with the index.php. Many users planning small websites want to keep their URLs user-friendly, so that people can type the page they want directly. In addition, some users feel that if the index.php doesn't have to be visible in the URL, then it should be hidden. You can see that http://localhost/index.php returns the same page as http://localhost/. ExpressionEngine requires the index.php to run. So your choice is to hide it, rename it, or leave it alone. If you wish to hide or rename it, it's better to do so up-front, before you start building your website and users start visiting it. The reason ExpressionEngine does not come with the index.php hidden by default is that the hiding is not something that is done within ExpressionEngine. Rather, it's done on the server where the website is hosted. Since there are so many different possible server configurations, it would be impossible for EllisLab to fully support it. Since the example website used in this book is a small business website, you will remove the index.php. However, bear in mind that this is not a technique that is supported by ExpressionEngine and that what works on one server may not work on another. If following these instructions does not work for your site, there is much more information, including alternative methods, at http:// expressionengine.com/wiki/Remove_index.php_From_URLs/. You can also consider simply renaming the index.php, which is outlined below. You can rename it to remove the .php file extension or rename it to a word that better fits with the overall theme of the site. Renaming index. php is officially supported and can look just as seamless to your visitors.
Note that neither removing nor renaming index.php is required for ExpressionEngine to function. Bear in mind though, that if you choose to do neither, this book does assume that the index.php has been removed.
[ 31 ]
Getting Installed
Hiding the index.php in ExpressionEngine URLs
If your host provider uses Apache and the server recognizes .htaccess files (which means mod_rewrite is enabled), you can hide the index.php by creating a .htaccess file. 1. Open Notepad or another plain text editor and save a blank file as .htaccess (there are no letters before the period but the period is important). Be sure that the file does not save with an additional extension—especially if you have extensions hidden on your computer. The best way to do this (if you are using Notepad on Windows) is to choose Save as type: All Files (*.*).
2. In this file, type the following three lines: RewriteEngine on RewriteCond $1 !^(images|system|themes|index\.php|admin\.php) [NC] RewriteRule ^(.*)$ /index.php/$1 [L]
Please note that during installation you renamed the system directory to a different name, so replace system on the second line with your chosen name instead. This lets you parse all files as if the index.php file is there, except for the files and directories listed between the brackets on the second line. If there are files or directories beyond those listed (such as from a previously existing website on the same domain), also add them to the list on the second line, each separated with a | character. This is called the exclude method because you are excluding those files not to be treated as ExpressionEngine files. 1. Save .htaccess to the root directory of your ExpressionEngine website (such as C:\wamp\www\.htaccess). If you are using IIS on a Windows Server, the same effect may be achieved by renaming .htaccess to httpd.conf. ISAPI_ Rewrite must be enabled on the server. [ 32 ]
Chapter 2
2. Next, log in to the control panel (http://localhost/admin.php), select Admin | General Configuration, and change the Name of your site's index page field from index.php to nothing.
3. Open http://localhost/about. If it looks like the screenshot below, then the changes were successful. If the changes were not successful, your hosting provider may not support the commands you are using in the .htaccess file. In this case, change the Name of your site's index page back to index. php and delete the .htaccess file from your server so that ExpressionEngine keeps working. If you are unable to remove the index.php from your URLs, it is also possible to rename it. See below.
[ 33 ]
Getting Installed
Renaming index.php in ExpressionEngine URLs
If you have successfully removed the index.php from ExpressionEngine URLs using the technique above, then you can skip this section. Whether due to technical limitations or personal preference, renaming the index. php is also popular. The easiest way to do this requires keeping the .php extension: 1. In the root directory of your website, rename the file index.php to any other name that ends in .php (such as welcome.php). 2. Next, log into the control panel (http://localhost/admin.php) and select Admin | General Configuration and change the Name of your site's index page field from index.php to the new name. This will ensure that any ExpressionEngine-generated links include the new name. If you wish to remove the .php extension entirely, your server must use Apache and have mod_rewrite enabled (to recognize .htaccess files). If following these instructions does not work for your site, there is more information available at http://expressionengine.com/user_guide/ installation/renaming_index.html.
3. Follow the previous two steps to rename the index.php file to a name without an extension (such as welcome) and set the ExpressionEngine control panel accordingly. 4. Open Notepad or another plain text editor and save the blank file as .htaccess (there are no letters before the period but the period is important; htaccess is the extension). Make sure that the file does not save with an additional extension, especially if you have extensions hidden on your computer. The best way to do this (if you are using Notepad on Windows) is to set the Save as type: All Files (*.*). 5. In this file, type the following to parse files named welcome (or whatever you choose) as a PHP file, even though it does not have a PHP extension. DirectoryIndex welcome index.php ForceType application/x-httpd-php
[ 34 ]
Chapter 2
6. Save the .htaccess file in the root directory of the ExpressionEngine website. 7. Open http://localhost/welcome/about/ and you should see the Agile Records About page. If the changes were not successful, then you will want to make one of the following changes to your .htaccess code: DirectoryIndex welcome index.php AcceptPathInfo on SetOutputFilter PHP SetInputFilter PHP
or DirectoryIndex welcome index.php SetHandler application/x-httpd-php
8. If neither of those alternatives works, your hosting provider may not support the commands you are using in the .htaccess file. In this case, rename the file on your server so that it once again has a .php extension, change the Name of your site's index page back to reflect the same name, and delete the .htaccess file from your server so that ExpressionEngine keeps working. If you do rename the index.php file, bear in mind that this book assumes the index.php file has been removed entirely.
Summary
In this chapter, you downloaded and installed ExpressionEngine and glimpsed the Agile Records example website. We also changed where you log into the control panel, so that you can keep your renamed system directory a secret. You optionally used a .htaccess file to remove or rename the index.php that is otherwise part of every ExpressionEngine URL. In the next chapter, you will get hands-on with ExpressionEngine and start exploring what it can do for you.
[ 35 ]
Getting Installed
The key points to remember after working with this chapter are: •
Your website can be accessed in a browser at http://localhost/
•
Your control panel can be accessed in a browser at http://localhost/ admin.php (or at http://localhost/system/index.php)
[ 36 ]
The ExpressionEngine Tour By now, you should have ExpressionEngine installed and be ready to start using it. In this chapter, we are going to use the example site that comes included with ExpressionEngine to get an overview of what ExpressionEngine can do. After completing this chapter, you will be familiar with: •
Navigating the ExpressionEngine control panel
•
Channels, and how to use them to create and manage your content
•
Templates, and how they relate to URLs
Agile Records
The example site that comes with ExpressionEngine is Agile Records—a website for a fictitious record label designed by Erskine Design (http://erskinedesign.com). The Agile Records website is put together especially for new (and experienced) users of ExpressionEngine. In this book, we are not going to discuss how to edit or adapt the Agile Records site to your own needs, and we are not going to talk about how it is designed or put together. Rather, we are going to use Agile Records as a launching point to introduce you to some of the basics of how ExpressionEngine works.
If you are interested in learning more about Agile Records, stay tuned to the ExpressionEngine blog (http://expressionengine.com/blog) for news on learning resources based on the Agile Records site.
The ExpressionEngine Tour
Inside the control panel
Every ExpressionEngine website has a frontend website (such as the Agile Records website you can see at http://localhost/) and a backend control panel (http:// localhost/admin.php or http://localhost/system/index.php). The control panel is only accessed by you and others who may be responsible for managing the website and creating the content—no one else even needs to know it exists. Since most of the work that goes into building an ExpressionEngine-powered website will take place in the control panel, it is worth first becoming familiar with how it is organized. Note, there is also a member control panel, which can be accessed by members of the public (if you so choose). This pared-down control panel allows the member to customize settings specific to him (such as what their member profile page says). Unlike the administrative control panel, the member control panel provides no settings to manage the overall website. You will learn more about the member control panel in Chapter 6, Members. When you first log into the control panel (http://localhost/admin.php or http://localhost/system/index.php), you will see three broad categories of
actions, namely creating, modifying (or deleting), and viewing.
Throughout this book, it is assumed that you are using an http:// localhost/ address. If you are following along on an actual website, substitute http://localhost/ for your website domain, for example, http://www.example.com/
[ 38 ]
Chapter 3
At the top of the control panel is its main navigation. This gives you quick access to any part of the control panel. The home icon, in the upper-left corner, will bring you back to the control panel home page from wherever you are. In the upper-right corner is a link to your website. Underneath is a breadcrumb, indicating where you are within the control panel. On the right side of the administrative control panel is your profile. The profile includes the name of the member currently logged in (that is, you), your member group, your avatar, a link to the member control panel, and your Notepad. This section is unique to each user within the administrative control panel access. ExpressionEngine distinguishes between two main types of members—ones with administrative control panel access (such as you) and ones without it. If you choose to allow members of the public to join your website, you can allow them access to the member control panel directly, without them first having to log in to the administrative control panel. We will discuss member functionality in ExpressionEngine in Chapter 6. If, at any time, you do not wish to see the sidebar, you can hide it by clicking on the hide sidebar link underneath the Quick Links section. This will maximize your screen space and is especially useful when working on posts or templates where you do not want the extra distraction on the side. To reveal it again, simply click on reveal sidebar at the top right of the screen.
At the bottom of the screen, you can see a tab labeled ExpressionEngine Info. When you click on it, it expands to show your current version and build, as well as key links that every ExpressionEngine user will find useful. This is actually an example of a static Accessory (an EE2 add-on), which we will talk about more in Chapter 10, Extending ExpressionEngine.
[ 39 ]
The ExpressionEngine Tour
Tab Manager
One useful feature of the top navigation menu is the ability to add a link to any page in the control panel that you frequently access. To do this, when on the page that you wish to create a link to, simply click +Add and then click Update. One page that you will find yourself frequently visiting when building an ExpressionEngine website is the Template Manager. Let's add a tab for this page now: 1. First, visit the Template Manager screen by clicking on Design | Templates | Template Manager. Notice how it takes three clicks to get to this page.
2. While on the Template Manager page, click +Add, and you will be taken to the Tab Manager.
[ 40 ]
Chapter 3
3. You can already see that Template Manager is now listed as one of your Current Tabs. Click Update and you will now see a new top-level menu option that, when you click on it, will take you straight to the Template Manager page.
4. To delete a tab, click on your member control panel (underneath My Account on the far right-hand side of every page). Select Tab Manager from the list of options on the left-hand side. Then, delete the title of the tab out of the box (in this case, Template Manager), and then click Submit. Your top menu should be back to normal. Any page you find yourself going to on a frequent basis can (and should) be added to the top navigation menu—any page in the control panel can be added as a tab.
Notepad
The Notepad is a useful tool that appears on each page of the control panel. It is a good place to keep notes (reusable pieces of code, notes on how a tag works, or a to-do list). For example, if you have trouble remembering the date formatting code (http://expressionengine.com/user_guide/templates/date_variable_ formatting.html), instead of having to constantly refer to the EE User Guide, you can add them to your notepad where they will be visible to you whenever you need them. To edit the Notepad, simply hover your mouse over the notepad entry and click. Type in your note and click Save. Notes in the Notepad can only be seen by you. Other users with control panel access will have their own notepads.
[ 41 ]
The ExpressionEngine Tour
Quick Links Manager
Just below the Notepad is a Quick Links Manager link. Click on it, and you can enter shortcuts to the most common websites you refer to when building a website. These could be anything—shortcuts to common pages on your own website or shortcuts to other websites (such as tutorials or guides).
By using the Notepad to store notes on the tags and syntax, and by using Quick Links Manager and Tab Manager to provide quick shortcuts to the places you go most often, you can really make ExpressionEngine fast.
Control panel themes
In addition to customizing the various aspects on the control panel, there are also different themes available in ExpressionEngine that can change the look and feel. These are Corporate, Fruit, and Mobile. To download and switch to additional themes, follow these instructions: 1. Log in to ExpressionEngine and visit the Downloads page to download the additional control panel themes. 2. Once downloaded, unzip the file and upload the themes folder to the root of your website. Since there is already a themes folder, you may be asked if you want to overwrite any duplicate files. Since there are no duplicate files, it's ok to say yes to this. 3. In the control panel, select Admin from the top menu, and then select General Configuration.
[ 42 ]
Chapter 3
4. About half-way down the list of settings, you should see a drop-down box entitled Default Control Panel Theme. Here you can select the theme of your choice (except Mobile) and click Submit to change it.
The Mobile theme is used automatically when you log in to the control panel from a smart phone (such as the iPhone). It cannot be selected manually.
[ 43 ]
The ExpressionEngine Tour
The Fruit theme is a more colorful version of the Default theme.
The Corporate theme is a popular alternative to the Default theme, as it is more compact.
If you are using Custom themes, be sure to update them at the same time as you upgrade ExpressionEngine (see Chapter 10, Extending ExpressionEngine for more information on upgrades).
Creating content
Now that you are more familiar with the control panel, the next step is to create your first post. In ExpressionEngine, content is stored in channels. A website might have one or more channels of content (in the same way that different television channels have different content) and over the course of this book, we will create all sorts of channels for different purposes.
[ 44 ]
Chapter 3
The Agile Records website has two channels—Information Pages and News. Each channel is used for two types of content—the Information Pages channel is used for the Staff Profiles and the About the Label posting on the About page (categories are used to distinguish the Staff Profile entries). The News channel is used for both news and for band information on the main page. To keep things simple, we will post to the News channel so that the entry appears on the main page. 1. Whenever you want to create new content, from the main page of the control panel, you can simply click on Create Entry and then click on the channel you wish to publish to (in this case, the News channel).
2. Alternatively, you could also select Content from the top menu, then Publish, and then click on the channel you are publishing to. If there was only one channel, then clicking Publish would automatically take you to the publish page for that channel.
[ 45 ]
The ExpressionEngine Tour
3. When you are logged in as a Super Admin, which you are because you created the ExpressionEngine website, the Publish page has a lot of different options and tabs. To start with, give your new entry a title. Since this is your first entry, we are going to use a title of Exciting First Entry. As a Super Admin, you can see all the options available in ExpressionEngine. In Chapter 6, Members, we will discuss how you can configure the control panel for other administrative users so that they see only the options that they need.
4. As you typed the title in, you probably noticed that the URL Title was also entered. The URL title is the URL segment for the entry that you are posting. Every entry you post is given its own page, where, for example, comments are displayed and submitted. Since the URL Title will form a part of the URL, it cannot contain spaces, though underscores or dashes are acceptable. Most of the time, you can accept the URL Title that ExpressionEngine chooses. However, if you do want to customize the URL Title, for example, by making it shorter, you are welcome to do so. For now, leave the URL title as exciting_first_entry.
If you prefer dashes instead of underscores to separate words in your ExpressionEngine URLs, this option can be set globally by going to Admin | Channel Administration | Global Preferences.
5. Next, you can see the Body field, where you can type in your content. Go ahead and type something. Be creative!
[ 46 ]
Chapter 3
6. For cases when you need to type in a lot of content, ExpressionEngine also includes a Write Mode. Click on the icon underneath the left side of the field, and the field will expand to a full-screen view. Here, you can type away without the clutter and limited box size of the Publish page. When you are done, click Publish to Field to return what you have typed back into the field.
7. The formatting drop-down list underneath the field gives you the option to override how ExpressionEngine outputs the content of this field. The default for each field is selected at the time the fields are created, and changing it here can have unexpected results. Therefore, leave this option set to XHTML. The three options principally determine how paragraphs are defined— the XHTML option means ExpressionEngine will add
tags around each paragraph. Auto means ExpressionEngine will replace blank lines with tags. None means that ExpressionEngine will not add any tags to identify paragraphs, and the content of the field will be sent to the template as is. [ 47 ]
The ExpressionEngine Tour
8. You do not have to enter anything in the Extended text field (if you do, the Agile Records website will create a Read More link underneath your entry that links to a separate page). For now, skip straight to uploading a picture. Under News Image, select Add File. You can either upload any picture of your choosing, or you can download the picture you see here from http://www.leonardmurphy.com/ book2/chapter3 or from http://www.packtpub.com/support (select this book from the drop-down menu).
9. Next, the File Manager is displayed. Click on Upload File. 10. Browse to the picture you want to upload, then click Upload. (Leave the upload directory as About).
This will upload the file to your file upload directory. In this case, the About upload directory corresponds to /themes/site_themes/agile_records/ images/uploads and the Main Upload Directory corresponds to /images/ uploads. This is a nice way for you to upload images without needing to use a separate FTP tool. However, there are limitations on the size of the file(s) that can be uploaded (controlled by the php.ini file that not all web hosting providers provide access to). You can edit the location of these directories, restrict what kinds of files can be uploaded, or create other destination directories in Admin | Content Administration | File Upload Preferences. 11. You will be prompted to Resize Image or Return to Publish. Click Resize Image.
[ 48 ]
Chapter 3
12. Next, change the width of your image to 249 Pixels. With the Constrain Proportions checkbox checked, the height should automatically change too. Since there is already a copy of this image on your computer, select to Resize the original image, rather than creating a copy. After making these changes, click on Edit Image. If you selected to create a copy, then two copies of the image would be visible in your About upload directory—the original (with the filename of fireworks.jpg) and the copy (with the filename of fireworks_ thumb.jpg).
13. At the top of the Publish page, you will notice four other tabs—Date, Pings, Options, and Categories. Date allows you to future-date or back-date an entry on your website (if you future-date, it will not appear on your website until that date, unless you allow future entries in your template code). Ping allows you to ping another website when you publish an entry. Options allows you to change the status of an entry (for example, to close it so it does not appear on your website). Categories allows you to select a category for your posting. For now, you can just post your entry! Click on the Submit button to do this.
[ 49 ]
The ExpressionEngine Tour
14. The View Entry page will display, indicating your entry has been submitted. Now visit http://localhost/ to see your new entry on the Agile Records website.
Congratulations! You have posted your first entry in ExpressionEngine! In doing so, you have gained some familiarity with the Publish page and all the features it offers you, including full-screen editing and the ability to upload and resize pictures directly from the Publish page—no FTP required. Next, we will talk about templates and how they are used to display the content from your channels.
Templates and URLs
A fundamental concept in ExpressionEngine is that of a template. Go to any ExpressionEngine-powered website, and you will undoubtedly be looking at the output of a template. A template is used to combine structure and presentation with ExpressionEngine functionality. A template can be thought of as a web page. It can contain all the same code that you can put into regular files on a static website, such as HTML, CSS, JavaScript, or PHP. However, unlike a static website, you can then add ExpressionEngine tags within your templates to add functionality from ExpressionEngine to your website (for example, to display content from a channel). In this way, you combine all the features of ExpressionEngine with all the flexibility that HTML and CSS offers in terms of layout and design. [ 50 ]
Chapter 3
A template is not pre-written code that you can adapt to your needs, though it is certainly possible to download site themes for ExpressionEngine that make it quick and easy to get a site up and running (check out http://eetemplates.com/ or http://www.woothemes.com/why-ee/ if you are interested in this). The idea behind ExpressionEngine is to enable you to design your own website, and then enhance it with all the power and functionality that ExpressionEngine brings to bear. That is why ExpressionEngine is very popular with website designers; it does not place any limitations on your design. On the flipside, this flexibility is also why there is a learning curve with ExpressionEngine; you have to know how to build a website to be able to build a website with ExpressionEngine. Think of ExpressionEngine like an expensive food-processor. Though a food-processor can really enhance your recipes, if you do not know how to cook, the food-processor is not going to cook for you. Next, we will take a closer look at templates and how they relate to URLs, before talking about using tags to display channel content. 1. If you are not already logged in, log into ExpressionEngine at either http://localhost/admin.php or http://www.example.com/admin.php. 2. From the top menu, select Design | Templates | Template Manager.
[ 51 ]
The ExpressionEngine Tour
Templates are stored in groups (listed on the left-hand side of the screen). How you group and organize your templates is completely up to you, though a typical ExpressionEngine site will have a template group for each section on the site, plus one or more internal template groups used, for example, for CSS templates. The Agile Records website has four template groups; three of them correspond to sections on the website (about, search, and news) and one is an internal template group (global_embeds).
Templates have a direct relationship with URLs. Take, for example, the following URL: http://localhost/about/contact If you did not remove the index.php in Chapter 2, Getting Installed, then your URL will be http://localhost/index.php/about/ contact. The URLs in this book assume that the index.php has been removed.
•
about is the template group
•
contact is the template
This means that the URL above is actually showing the contents of the about/ contact template. The index template is the default template for any template group. So, for example, visiting http://localhost/about/ will display the content of the about/index template group. [ 52 ]
Chapter 3
Finally, the template group that is asterisked (news) is the default template group. This means that visiting http://localhost/ displays the content of the news/index template (the default template of the default template group).
Creating your first template
To better demonstrate how templates and template groups work, let us create a template group with a template. 1. From the Template Manager, select New Group (on the left-hand side next to the Template Groups title).
2. Give your new template group a name of site. There is an option to Duplicate an Existing Template Group, which copies all the templates from one template group into your new template group. This can be useful, if you are creating a template group that will work similarly to one that you have already created, but this is not the case right now. Checking the box Make the index template in this group your site's home page? means that visitors will see your new template group instead of the ExpressionEngine example site. Do not check this box.
[ 53 ]
The ExpressionEngine Tour
3. Click Submit to create the template group. You will be returned to the Template Manager and you will see your new template group with the index template. At the top-right of the screen, you should also see an unintrusive green check, which when clicked, displays a message that says Template Group Created. 4. Click on the word index to edit the index template of the site template group.
5. A template is essentially just text, although it usually contains HTML, CSS, or ExpressionEngine tags. When you first create a template, there is no text, and therefore, all we see is an empty white box. To demonstrate how templates are seen by visitors, type in a sentence and click on Update and Finished.
The Preferences section allows you to configure various settings regarding the template (including what the template contains—a web page containing a mix of HTML, ExpressionEngine tags and other code, a static page containing no ExpressionEngine tags, an RSS feed, or a dedicated template for CSS or JavaScript). The Access section allows you to control which member groups can see a template when looking at the frontend of your website (for example, if you are building a new template and want to prevent visitors from being able to see it). [ 54 ]
Chapter 3
The Template Notes section is a fabulous place to store notes related to the template—snippets of code, information about how the template is built— anything you want. If you want to expand the size of the field with the template code in it, click and drag the dots that appear immediately underneath the field in the center. In this way, when a template contains a lot of code, you can maximize how much you can see on a single screen. 6. After clicking Update and Finished, you will be returned to the Template Manager. In a separate window, visit the URL http://localhost/site/ index, and you will see a page containing the output from your template.
7. Now try typing the template group without specifying which template to load. The output from the index template is returned.
At this point, you have posted an entry to a channel, created a template, and seen how URLs work with templates. However, what you haven't seen is how to display your channel content in your template. So let's do that now.
Using tags to display content in your templates
Everything on an ExpressionEngine website must go into a template before it can be viewed. You can create as much content as you like in a channel, but until you create a template that displays that channels' content, it will do no good.
[ 55 ]
The ExpressionEngine Tour
Right now, the news channel is displayed on the Agile Records example site. To get a better idea of how tags are used to display channel content in templates, we will try displaying the same channel in a stripped-down template. 1. From the top menu, select Design, then Templates | Edit | site, and finally click on index to edit the site/index template.
2. A tag is used to include channel content in a template. A tag is a unique ExpressionEngine piece of code that is used in templates to include ExpressionEngine's extra functionality. In this case, because you want to include the content from a channel, you need the channel tag. In the site/ index template, delete the plain text entered earlier, and replace it with the following code. This code includes the standard HTML code for a web page, along with a special ExpressionEngine tag to display content from the news channel in the body of the page: My Channel Content <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> {exp:channel:entries channel="news"} {title} {news_body} {news_extended} {/exp:channel:entries}
[ 56 ]
Chapter 3
You can always identify an ExpressionEngine tag in a template because it is surrounded by {}. A Tag Pair always has an opening tag (such as {exp:channel:entries} and a closing tag (such as {/ exp:channel:entries}). A tag pair can also have variables and parameters. Parameters (such as channel="news") are always part of the opening tag and define settings for how the tag should behave, whereas variables (such as {body}) are used between the opening tag and the closing tag and output data to your page. In the template above, the {exp:channel:entries} tag loops through all of the entries in the news channel (as set by the channel parameter). The {title}, {news_body}, {news_extended}, and {news_image} variables bring back the data in the specified fields for each entry and output them to the page. Any code between the tag pairs is repeated for each entry (including the horizontal line). 3. Click on Update and Finished to save your updates.
The difference between Update and Update and Finished is that Update will keep you in the template editing screen so that you can continue to make further edits, whereas Update and Finished returns you to Template Manager. [ 57 ]
The ExpressionEngine Tour
4. Now view the site/index template at http://localhost/site to see how it looks. It should look like the following screenshot. Notice how the {title} has been changed to reflect the actual title of your entry (and so has {news_ body} and {news_image}).
As you can see, adding tags that display channel content in your templates is fairly easy. Obviously, this page is rudimentary and we could do a lot more to make the page prettier, including adding a site header and logo, adding a menu, and using CSS to style the pages. In the next chapter, you will talk about harnessing ExpressionEngine to build an entire website in this manner. In the meantime, you can already see how ExpressionEngine tags integrate seamlessly into your own HTML code, making it easy to add the power of ExpressionEngine into your own site designs. You will find that the greater your skill with HTML and CSS and designing websites without ExpressionEngine, the better your ExpressionEngine-powered websites will look too.
[ 58 ]
Chapter 3
Challenges
These challenges are designed to stretch your knowledge and get you to work hands on with ExpressionEngine. The answers will not necessarily be found within the chapter, but with the knowledge gained from the chapter, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to figure them out. 1. In this chapter, you created a template (site/index) and added code so that it displays the contents of the news channel. However, right now, it displays all the entries of the news channel. Can you figure out how to change it so that it only displays the most recent two entries, instead? Hint: You will need to use a parameter in the channel tag to accomplish this—the ExpressionEngine documentation, which you will refer to often as you build your website, will help you figure this out too. 2. By now, you should be familiar with posting entries in ExpressionEngine. To be sure, try posting a third entry to the news channel and verifying that the two entries being displayed on the site/index page now include this most recent entry. 3. Your Exciting First Entry is not exciting enough. Can you figure out how to edit the text to make it more exciting? 4. If you are less than familiar with HTML and CSS, see if you can find some good tutorials on the web to bring you up to speed.
Summary
You have now seen some of the most basic features of ExpressionEngine, including templates, channels, and tags. In the next chapter, we will introduce Ed & Eg—the example site we will use for the rest of the book. You will see how ExpressionEngine can be used for an entire website and how, by using ExpressionEngine, you can make it much easier for anyone to make editorial changes without ever seeing (or knowing) HTML. The key points to remember after working through this chapter: •
Content is stored in channels. This includes any kind of content that you might want to store—photos for your photo gallery, posts on your blog, or the text of your website. Be imaginative!
•
Templates make up the basic structure of your website, and for the most part your URLs will match your template structure. Within templates, you can write standard HTML and CSS. The stronger your HTML skills, the better your site will look. [ 59 ]
The ExpressionEngine Tour
•
Before the content of a channel appears on your website, it must be included in a template by using an ExpressionEngine tag.
•
You can really configure the control panel to keep you productive—keep notes in the notepad, add internal links to the top menu, or add external links to the Quick Link Manager. If you are feeling more adventurous, change the control panel theme entirely!
•
And for those occasions when you want an uncluttered screen, do not forget you can hide the sidebar. Use Write Mode for full-screen text editing or expand the size of the template field when editing templates.
[ 60 ]
Moving a Website to ExpressionEngine By now, you have already used ExpressionEngine to publish content. The vast majority of a website is content, and ExpressionEngine makes it easy to create and maintain such content. The next step is to create an actual website and learn how to use channels and templates to display your content. In this chapter, you will take an existing website that was written outside of ExpressionEngine and adapt it to ExpressionEngine. As part of this transition, you will be: •
Creating your own channel with fields customized to the content that you will be displaying
•
Using templates to display your channel content
•
Creating a 404 page for visitors who get lost on your site
Introducing Ed & Eg
Ed & Eg are fictional financial advisors in Anytown, USA. They have a small website written in static HTML/CSS that describes their services and how to get in touch with them. Their website currently consists of six HTML pages, one CSS styling file, and a handful of images. Although relatively simple, neither Ed nor Eg are familiar with HTML code, so they tend not to update their website. Although this has been fine for them up to now, they want to start reaching out and interacting with existing and potential customers through their website and they have picked ExpressionEngine for the task. Soon they will see what a good choice they have made!
Moving a Website to ExpressionEngine
To download their website, you can either visit http://www.packtpub.com/ support and select this book from the drop-down list for the code files, or visit http://www.leonardmurphy.com/book2/chapter4. Extract the EdEg directory
into any directory on your computer. Once extracted, you can view the website by opening the index.html file in your browser. If the pages appear unstyled, you may not have extracted the files first. Although you can open the individual files from within the compressed directory, they will not be styled and the links will not work.
The website design was adapted from a design called Pluralism from http://www. freecsstemplates.org/. The design itself is released for free under the Creative
Commons Attribution License 2.5, and you can download the original design (as well as many other free CSS designs) from their website.
Deciding upon an approach
There are three basic ways in which you could approach converting this site into ExpressionEngine. 1. You could use a third-party add-on such as Structure (http:// buildwithstructure.com/) that is designed specifically to help maintain static pages in ExpressionEngine. This can be especially useful when dealing with multiple tiers of static content. However, since this is not part of the built-in ExpressionEngine functionality, this chapter does not use this method. 2. You could put the page layout code into templates, but put the main text of each page into a channel and then use the {exp:channel:entries} tag in your templates to display the page content.
[ 62 ]
Chapter 4
3. You could put both the page layout code and the main text of each page into templates and not use channels at all. The last option, leaving the content of each page in a template, is actually a good approach in certain circumstances: 1. If there are only a handful of static pages, it might be less work and less complication to keep the static content in templates, rather than creating a channel to hold the content. 2. If each static page has its own look and feel, then keeping each page in a separate template allows more flexibility between pages. 3. If you are comfortable editing templates whenever you want to change the content of the static pages, then keeping the content in templates will work fine. (However, if you plan to have someone else update the content, having them edit the content in a channel is easier for them and a less risky task for you than letting them edit the template). Since Ed & Eg's static pages have a consistent look and feel, and Ed & Eg are not completely comfortable editing HTML themselves, using a channel for the page content is a good solution. With each website page in the current static website as its own channel entry, Ed & Eg will be able to change the wording of a page easily by editing the corresponding entry, while the more complicated HTML that builds the page will be out of their sight. Note that in this chapter, we will not be converting the Frequently Asked Questions page—this will be converted in Chapter 5, Creating a Fully-Equipped Channel.
Designing and building your channel
Creating a new channel for your website involves the same basic steps each time. These steps can be completed in any order and you will often find this to be an iterative process: 1. You can optionally create custom statuses, custom categories, and/or custom fields for your new channel 2. You have to create the channel that will hold the new content 3. You have to populate the channel with some content 4. You have to create (or modify) templates that will display the content Let's begin! [ 63 ]
Moving a Website to ExpressionEngine
Custom statuses
Each entry in ExpressionEngine can, by default, be marked as open or closed. An open entry means that the entry is visible on your website, whereas a closed entry means the entry is not visible. It is possible, however, to create more than these two statuses. You can use custom statuses to separate certain entries from others (such as the Agile Records website uses a custom status of Featured to identify which band to feature on the front-page). You can also use a custom status to build a workflow, for example, a draft custom status to indicate an entry that has been written, but needs someone else to review before being marked as open and appearing on the website. At this point in the design process, there is no reason for Ed & Eg's website channel to have custom statuses so the included Statuses status group (which includes open and closed statuses) will suffice.
Categories
Each channel in ExpressionEngine can also be associated with a category group. Once a channel has a category group, each entry in that channel can then be assigned to one or more categories in that group. Categories provide a natural but powerful way to organize your content, enabling you to group entries that are in the same category together and thereby encourage visitors to click-through to more of your content that interests them. Categories can also be used, such as status groups, to identify certain entries and do something different with them in your templates. The Agile Records example site uses categories to identify Staff Bios in the about channel and display them in their own section on the About page. For Ed & Eg's website, there are only a few static pages, so there is no reason to use categories.
Custom fields
When publishing to the News channel in the previous chapter, there were five fields that you could enter content into—Title, URL Title, Body, Extended Text, and News Image. The Title and the URL title are required, but the other fields can be changed depending on your needs. As an example, say you have a channel for recipes. You could have a custom field for the description of the dish, a field for the ingredients, a field for the preparation steps, a field for the nutritional information, and an image field for a photo of the finished dish. You can create a field for whatever information you want to store in your channel. [ 64 ]
Chapter 4
That said, not every channel needs its own set of custom fields. Different channels will often have similar content (for example, an introduction, the content itself, and an image). When this is the case, using the same field group for more than one channel works very well and reduces the amount of administrative overhead. By default, the blank installation of ExpressionEngine does not include any custom field groups, so at least one must be created in order to build a channel. For Ed & Eg's website, two custom fields will be ideal—one to contain the text of the page and one for the image that appears at the top left on some pages. Although the picture is a static image of coins right now, creating it as a custom field will give Ed & Eg the flexibility to have a different image on different pages, without having to edit the HTML code. Do not worry about second-guessing ahead of time all the fields that you might need. While it is true that we may one day need a heading 6 and a text 6, they can always be added when the need arises. So now that we know what custom fields we want to create, how do we create them?
Creating a custom field group
To create custom fields, you first have to create a custom field group. To do this: 1. In the control panel, select Admin | Channel Administration | Custom Fields.
2. Here, you can see the field groups you already have (News and About). Click on Create a New Channel Field Group, which is located on the right above the list of existing field groups.
[ 65 ]
Moving a Website to ExpressionEngine
3. Next, you will be prompted for a Field Group name. Use the name website since these fields will be used for managing the static website content. Type this in and select Submit.
Now that you have created your new field group, you should see it under the list of Custom Channel Fields.
Creating your first custom field
Now that you have a field group, the next step is to create custom fields in that group. Start by creating a custom field to hold the image. 1. From the Custom Channel Fields screen, select Add/Edit Custom Fields for the website group. 2. You will now see a screen that says you have no custom fields. Click the button that says Create a New Custom Field on the right.
3. The Field Type that you should use for this is File, as this will provide a way to easily upload new image files (or select a previously uploaded image file).
[ 66 ]
Chapter 4
There are nine available field types included with ExpressionEngine: Checkboxes, Multi Select, Radio Buttons, and Select Dropdown: These allow you to set one or more pre-defined options that can then be selected on the Publish page. This can be useful if you want to restrict what can be entered into the field. For example, a book review website might rate each book that it reviews out of 5 stars. Within the channel, a select dropdown for rating could be defined with options such as 1 star, 1 ½ stars, 2 stars, and so on. When a new book review is being posted, the author of the entry selects how many stars to rate the book from a drop-down box. Then, in the template, since you know in advance what the possible values of the field can be, you can use conditional statements to render the appropriate graphic, based on the selected rating. Date: Allows you to define the field as a date (with a calendar date-picker). File: Allows you to define the field as a file (with a link to ExpressionEngine's built-in File Manager where you can upload files or pick a file that has already been uploaded). Relationship: Allows you to choose another channel, which can be related to this channel so that when you post to this channel, you can include information from the other channel (instead of replicating it). For example, if events in a calendar channel always involve the same meeting rooms, you can have information about the meeting rooms stored in a separate channel, and then when creating a new event in the calendar channel, you would simply have to pick the appropriate meeting room from the meeting room channel for the meeting room information to populate in your event for you. Text Input: Allows you to enter a single-line of text. This is appropriate for headings or URLs (for example) where you would not want multiple paragraphs of text. Textarea: Similar to Text Input; however, with Textarea, you can enter multiple paragraphs of text.
4. The Field Label is the name that people see on the Publish page. Label this field as Image. 5. The Field Name is how you will be referencing the field in your templates. The Field Name, therefore, cannot contain spaces. Name this field website_image.
[ 67 ]
Moving a Website to ExpressionEngine
Notice how the field name is made up of two parts, namely, the field group name and the field name, separated by an underscore. Why? Field names have to be unique across all field groups. If you precede each field name with the field group name, you can have the same field name in more than one field group. This convention has the added benefit that you are unlikely to use a reserved word for a field name. (For a list of reserved words, visit http://expressionengine.com/user_guide/cp/ reserved_words.html).
4. The Field Instructions is an optional field where you can write some text to guide people who will be publishing content as to what the field should contain. In this case, since this is an image field, you can let people know what the maximum image size should be so that it fits in the space available (in this case, no bigger than 200x200 pixels).
5. Is this a required field? should be set to No (as some of the pages on Ed & Eg's website do not have images on them). 6. Since this field is a file field, do not make the field searchable. If you said yes to this option, the content of this field could be searched through the builtin ExpressionEngine search functionality (see Chapter 9, More First-Party Modules). This makes sense when the field contains text, but not when it contains a file path like this one will. 7. Show this field by default should be set to Yes. This means that you can enter data into the field on the Publish page without having any additional clicks. You might want to say no to this if, most of the time, you would not expect data to be entered into the field and you want to keep the Publish page relatively uncluttered. [ 68 ]
Chapter 4
8. Do not alter the Field Display Order; this determines the order of fields on the Publish page. Since you are adding the fields in the order you want them to be displayed on the Publish page, this number will be correct. However, if, say, you forgot to add a field, you could manipulate this field so that the new field appears further up the Publish page (rather than at the bottom). This setting only affects the display order of the fields on the Publish page. It has nothing to do with the display order of the fields on your website (which is controlled entirely in the templates). 9. Since this field should only be used to display images, set the File Type to Image.
10. Once you are happy with all the settings, click on Submit. You will be returned to the Custom Fields page where you can now see your new field listed. If you get a message that says that there are currently no upload directories available, you must create an upload directory before the File field can be added. Essentially, this means that ExpressionEngine needs at least one directory on your website where uploaded images can be stored. To create a new upload directory, you must first create the directory on your website (or use /images/uploads/). Go to Content | File Manager, and then click on Create New Upload Destination on the right-hand side to define where this directory is located. Step-by-step instructions on how to do this can be found in chapter 8, under the File Manager section. This error only comes up if you are starting with a blank installation.
[ 69 ]
Moving a Website to ExpressionEngine
Creating your second custom field
You have now created a custom field for your image. There is one more field to add though—a text area field for the body of your content. 1. Click the button that says Create a New Custom Field. 2. Select a Field Type of Textarea. The Field Label should be Content and the Field Name should be website_content. Since this field is fairly selfexplanatory, there is no need to add any Field Instructions.
3. The required field question should be set to Yes, and this time, the field can be searchable since it will contain text. Do show this field by default and leave the Field Display Order as it is.
[ 70 ]
Chapter 4
4. You now have some options that are unique to text fields. The Textarea Rows allows you to choose how many rows the text area has on the Publish screen. (The more the rows, the less you have to scroll if you have a lot of content). In this case, since some pages on Ed & Eg's website have several paragraphs of text, set this to 12. 5. The Default Text Formatting for This Field allows you to define how you want the text formatted. Leave this as XHTML and set Allow override on publish page to No. This means that whatever text is typed into this field will be formatted before it reaches your template (including the addition of paragraph tags). This is fine as long as you remember this when coding your template (because if you also put paragraph tags in the template, it could double up the paragraph tags and create extra whitespace). For a complete list of modifications that the XHTML option makes, refer to http:// expressionengine.com/user_guide/general/text_formatting.html
Auto inserts a line break after every line in your entry, but does not insert any other XHTML. This is useful when you want there to be a blank line between paragraphs, but do not want the field to be wrapped in paragraph tags. None means that no formatting is applied to the data in the field. Whatever you submit in your field will be treated as one continuous block of text. This comes in most handy when dealing with a single line of text (for example, for a heading or image caption) where you would want to handle all the formatting in the template. Not allowing overriding on the Publish page means that the option to switch back to none or is not displayed on the Publish screen where someone might accidentally select it.
1. Leave the Text Direction as Left to Right (this option exists for websites whose content are in a language that is written from right to left).
[ 71 ]
Moving a Website to ExpressionEngine
2. Leave the Show Smileys and Show Glossary set to No. Smileys provide a link on the Publish page for you to insert smileys into the text area and the glossary provides HTML shortcuts on the Publish page. Since the main content of a website is unlikely to include smileys, and since Ed & Eg are not familiar with using HTML, you do not need either of these. 3. Set the Show Formatting Buttons, Show Spell Check, and Show Writemode options to Yes. The Formatting Buttons option provides a quick way to insert the HTML for bold or italicized text (commonly needed), spell check is always useful to have and Writemode (as seen in chapter 3) allows fullscreen editing (especially useful, given that some of Ed & Eg's pages are fairly lengthy). 4. Finally, set the Show File Chooser as Yes. The File Chooser provides a link to upload files and images. This could come in handy if, say, Ed & Eg wanted to include a second image within their page content (for example). The File Chooser provides a way to upload files (or pick previously uploaded files) and then embed a link within the text area. The main difference between uploading an image using the File Chooser for a text area and uploading an image using a dedicated File field is how the image is rendered. With a dedicated File field, Ed & Eg never have to see the tag—the display of the image is handled entirely within the template. With the File Chooser, Ed & Eg must place the resultant tag within their content.
5. Click Submit to save the second field. [ 72 ]
Chapter 4
Your custom fields are now built!
Next, you need to create the channel that will hold the content.
Creating a new channel
Whenever you take on a new task in ExpressionEngine, you usually need a channel. A channel can be thought of as a place to store content (as opposed to a template, which defines how and where the content is displayed). Most tasks in ExpressionEngine involve content, and in this case, the content is the text of Ed & Eg's static website pages. It's easy to create a new channel: 1. In the control panel, select Admin | Channel Administration | Channels from the top menu.
2. Select Create a New Channel (on the right-hand side, above the list of existing channels).
[ 73 ]
Moving a Website to ExpressionEngine
3. Now you need to choose a Full Channel Name and a Channel Name. The full name is used within the control panel to refer to the channel; the name is used in templates to reference the channel content. Choose Website for the full name and website for the channel name. 4. Select to not duplicate an existing channel's preferences. However, say Yes to editing the group preferences (this is where you can define which status, category, and/or field group you wish to use).
5. Under Edit Group Preferences, leave the Category Group as None, set the Status Group to Statuses, and set the Field Group to website (the field group you just created). If you do not select a status group at all, only SuperAdmins can publish open entries to a channel.
6. Finally, do not create new templates for the channel. If you do duplicate an existing group, your new template group will be populated with copies of all the templates from the copied group. This can be handy if all your template groups follow a similar structure. For now, since this is not currently the case, not duplicating a template group is best.
[ 74 ]
Chapter 4
7. Click Submit to create your channel. That's it! Your channel has been created.
Creating the content for our channel
Before you start building your templates, it helps to have some content in the new channel. Make your first entry the content of Ed & Eg's index.html page: 1. In the control panel, click on Content | Publish and then select the website channel. (If the website channel was your first, then clicking Content | Publish will automatically take you to the publish page for the website channel). 2. You can see that the Publish page looks different than it did for the News channel. There is still a Title and a URL Title, but instead of the Body, Extended text, and News Image, you can now see your custom fields instead (Image and Content). Since you are populating this entry with the content from index.html, open index.html in your browser. If you have not already done so, the Ed & Eg website can be downloaded from either http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/chapter4. The website can be extracted to any directory on your computer, where you should then be able to open the files.
[ 75 ]
Moving a Website to ExpressionEngine
3. The title of index.html is Welcome to our Website. Leave the URL Title as welcome_to_our_website (you will be using this URL title in the template).
4. Under Image, select Add File. Browse to the images sub-directory inside your extracted Ed & Eg directory and select money.jpg. Change your upload directory to the Main Upload Directory and click on Upload. (If you only have one upload directory, you will not be prompted to choose one).
5. Click on Return to Publish and you should see a thumbnail of the image on the Publish screen. Notice that the instruction saying that images should be no bigger than 200x200 is what you typed in when creating the custom field.
6. The rest of the content can be copied directly from your browser into the Content field. You do not need to copy the HTML tags that are in the source file as ExpressionEngine XHTML formatting will automatically identify paragraphs. [ 76 ]
Chapter 4
7. Notice how, on the static page, the Ed & Eg in the first line is bolded. To accomplish this in ExpressionEngine, highlight the words you want to make bold and then click on the B button above the field on the left. This will insert the HTML tags for bold (<strong>) around the word.
8. Next, wrap the two headings (Introducing Edward and Introducing Egbert) in tags. (ExpressionEngine formatting does not automatically identify headings). The final content should look as it does in the following image:
[ 77 ]
Moving a Website to ExpressionEngine
9. Click on Submit to save your entry and you are done! You have now entered the content of Ed & Eg's home page into your channel but it is not yet visible on your website. This is because everything on your ExpressionEngine-powered website has to be in a template in order to appear on your website. Therefore, the next step in this process is to create the templates that will show your channel content.
Creating templates
To start with, build two templates: one for the CSS stylesheet and one that contains the HTML that defines the page structure and brings in your channel content. Since the CSS template will be used all over your website, it makes sense to put this in a separate template group called includes (which you will create). For the page itself, use the index template in the site template group (created in chapter 3). 1. In the control panel, click on Design | Templates | Template Manager from the top menu (or if you created a custom tab for the Template Manager as part of chapter 3, click that instead). Then select the New Group button, located above the list of existing template groups.
2. Call the new template group includes. Do not duplicate a group and do not make the index template your site's home page. Click Submit.
[ 78 ]
Chapter 4
3. Back on the Template Management screen, make sure the includes template group is selected, and then click on New Template.
4. Call the new template site_css and select a Template Type of CSS. Leave the radio button checked to create an empty template and click Create and Edit.
[ 79 ]
Moving a Website to ExpressionEngine
5. From the Ed & Eg site that you downloaded and extracted earlier, open style.css in a text editor such as Notepad. Copy and paste the entire file into the includes/site_css template and click on Update. 6. Within the stylesheet, there are several references to images in the image directory. For the style to render properly, you will also need to upload all the images in the /images sub-directory (including money.jpg) to the / images sub-directory on your website. 7. After uploading all the images, you will also need to update the paths in the stylesheet to point to this sub-directory. Within the site_css template, wherever you see url(images/imgxx.jpg), change it so that it reads url(http://localhost/images/imgxx.jpg) (replacing http:// localhost/ with your website domain if you are not using a localhost environment). There should be 10 replacements in total (one for each image). When you are done, click on Update and Finished. 8. Next, on the Template Management screen, highlight the site template group and then select the index template. If you do not have such a template group and template (for example, because you did not follow Chapter 3, The ExpressionEngine Tour), then go ahead and create it now.
9. Delete everything currently in the template. (In chapter 3, this template was used as part of a demonstration on how channel content is displayed in ExpressionEngine and is not something that needs to be kept). 10. Open index.html of the static Ed & Eg website in a text editor such as Notepad. Copy and paste the entire source code into the template. [ 80 ]
Chapter 4
11. Since the stylesheet is no longer located in style.css, this path needs to be updated. To do this, use the ExpressionEngine stylesheet variable to indicate the includes template group followed by the site_css template that the CSS stylesheet is in. Change the line:
to read:
12. Finally, click Update to save the template and browse to http://localhost/ site to view the output of the template as it stands right now. It should look identical to the static index.html page (except that in ExpressionEngine, none of the links will work because you have only created one page so far). If you did not hide your index.php file as part of installing ExpressionEngine, remember that your ExpressionEngine URLs will include the additional index.php (for example, http://localhost/site will become http://localhost/index.php/site for you). URLs in this book assume that the index.php has been removed.
[ 81 ]
Moving a Website to ExpressionEngine
Did you spot the deliberate mistake? Although, at this point, everything looks good, the content being displayed in this URL is not from your channel at all, but is what you copied and pasted from the index.html file into your site/index template. The next step is to replace this static content with the content from the website channel.
Pointing your template to your channel
Pointing your template to use your channel content is the step that links together everything you have done so far (creating custom fields, creating the channel, publishing content to the channel, and creating templates). 1. In the control panel, click on Design | Templates | Template Manager from the top menu. Then select the site template group and click to edit the index template. 2. Delete all the code from after the tag to the closing tag (leave these two tags in place though). 3. Underneath the line, add the following. This code says that you would like to display content from the website channel (but only one entry and only the entry with a URL title of welcome_to_our_website). {exp:channel:entries channel="website" limit="1" url_ title="welcome_to_our_website"}
4. Next, add the following line. This says that you no longer want content from the website channel. {/exp:channel:entries}
5. In between the opening {exp:channel:entries} and closing {/ exp:channel:entries} tags, add the following code. This displays the title from your entry as an header. {title}
6. Underneath the title, add the following code to place the image from your channel entry onto the page. The {if website_image} statement means that if there is no image defined in the channel entry, do not display the img code at all. {if website_image}{/if}
7. Finally, add the following tag to display the content of your content field: {website_content}
[ 82 ]
Chapter 4
8. The content section should now look like: {exp:channel:entries channel="website" limit="1" url_ title="welcome_to_our_website"} {title} {if website_image}{/if} {website_content} {/exp:channel:entries}
5. Before saving this snippet, update the link that appears in the Promotion! box from promotion.html to {site_url}promotion. (Although you have not yet created a promotion template group and a corresponding website channel entry, when you do, this link will work). [ 94 ]
Chapter 4
6. Click on Update and Finished to save the snippet.
7. Now go to the includes/.website_page template and replace the sidebar code you just copied into the snippet with the snippet tag {website_ sidebar}. The four lines after should now look as follows. When you are done, click Update.
6. If you now visit your website, you should see that your menu links have all changed. Verify that you can successfully click between the Homepage and the Individual/Family pages you have already created.
Embedded templates
You have already seen an example of an embedded template. An embedded template can do everything a snippet can do with two main differences: 1. Embedded templates can be passed variables, and the output can then vary based on those variables.
[ 96 ]
Chapter 4
2. An embedded template is a template. ExpressionEngine has many different options that can be defined on a per-template basis (different templates can have different access controls, different caching preferences and different PHP settings) whereas snippets have the same settings as the template they are in. Furthermore, you can restrict certain template groups so that other administrative control panel users cannot see them, but with snippets, you can only give other administrative control panel users access to all snippets or none of them. Note that when using embedded templates, you can define as many or as few variables as you wish. Simply listing the variables and their values in the tag creates the variables, for example, {embed="template group/template" variable1="dog" variable2="cat"}. If you do not want any variables, then the tag is simply {embed="template group/template"}.
Now that you have seen examples of Preload text replacements, global variables, snippets, and embedded templates, you can certainly go further and extract even more repeated code into these tools. The page footer could be a global variable, as could the widebar. However, it is important to strike a balance between reducing repetition and writing code that you will understand a year or two later. Although only you can know where that balance lies for you, here are some recommendations: •
•
Keep custom tags descriptive as to what the code is that they represent (for example, instead of {widget}, use a name that makes it obvious to you what the tag represents). As you start out, avoid putting opening tags (such as a ) into a global variable, snippet, or embedded template, without the corresponding closing tag (such as a ). While ExpressionEngine does allow this, it can make the template code more difficult to troubleshoot. As you grow more experienced, there can be cases when your website page requires certain elements in a certain order simply to build the layout, so you may find it more efficient to replace a series of opening 's with a global variable and then create a second global variable for the corresponding closing 's.
•
Do not bundle unrelated parts of your page into the same global variable, snippet, or embedded template. While you could use one snippet for the entire footer, including the FAQs and the copyright notice, it would cause problems if, on one page, you only need the copyright notice, but not the FAQs. [ 97 ]
Moving a Website to ExpressionEngine
For an example of just how far you can take these techniques, check out Derek Jones' official ExpressionEngine blog series 'Behind the Curtains' that talks about how EllisLab uses ExpressionEngine on their own websites. (Note that the series was written in 2007, before snippets existed): http://expressionengine.com/blog/ article_list/category/behind_the_curtain/
Creating a 404 Page not found
A 404 Page is an essential part of any website, and working through this chapter, you may have noticed that your 404 Page is still themed like the Agile Records website. In this section, you will take advantage of all the repetition-reduction you have done as you create a new 404 Page. 1. Select Design | Templates | Template Manager, select the Includes template group, and then select New Template. Call the new template 404. The Template Type will be Web Page, select Duplicate an Existing Template, and finally select the includes/.website_page template to copy from. Click on Create and Edit. 2. Since the 404 Page content does not come from a channel, delete the line that reads {preload_replace:my_channel="website"}. 3. Change the line to: Page Not Found - Ed & Eg Financial Advisors
Replace everything from to
4. Click Update to save the changes. 5. Now that you have a 404 Page that is consistent with your site design, you can define this page to appear when a page is not found. Select Design | Templates | Global Preferences from the top menu. 6. Under 404 Page, select includes/404 as the template to display. At the same time, make sure Enable Strict URLs is set to Yes (or your 404 Page will not work). Click Update. [ 98 ]
Chapter 4
Now, when you visit an invalid URL (such as http://localhost/toast), you will see your 404 page instead of the Agile Records 404 page.
Templates as files
While working with templates within the web-based control panel interface works well, it does have limitations. If you are used to coding HTML files using your favorite text editor, you may wish to continue using that text editor and FTP the files to your website instead. In ExpressionEngine, this is entirely doable. 1. If you are following along on an actual website, you will need to ensure that the directory permissions for /system/expressionengine/ templates are set to 777. If you are using a localhost environment, this is not necessary. This directory is where your template files will be saved. [ 99 ]
Moving a Website to ExpressionEngine
2. In the control panel, select Design | Templates | Global Preferences from the top menu. 3. Set Allow Templates to be Saved as Files to Yes. The likelihood is that the Basepath to Template File Directory is already set to the full server path for / system/expressionengine/templates, but if it is not, you will need to set it.
4. Click Update to save your changes. 5. Although this option allows you to start creating templates as files, it does not automatically go back and create files for your existing templates. To do this, you have to mark each template to save as a file. Edit each template in the site, individual, and includes template groups in turn, check the box marked Save Template as File (just above the Update button), and then click Update and Finished.
6. You will now see your template files in system/expressionengine/ templates in a sub-directory called default_site. You can now edit your template code by editing these files directly. You can easily create new templates and new template groups without using the control panel by putting new files and directories in this directory. When creating new templates and new template groups, there are certain conventions to be aware of: template groups are separate directories with the name of the group followed by a .group extension. Webpage templates end in .html and CSS templates end in .css. You can edit templates in the control panel and in the files interchangeably. When opening a template in the control panel, ExpressionEngine will look to see if the file is newer than the database version, and if so, load the file. Updating your template will then update the ExpressionEngine database and file simultaneously (unless you uncheck the box to save it as a file). [ 100 ]
Chapter 4
Know that when displaying pages to visitors, ExpressionEngine will always use the file before using the template saved in the ExpressionEngine database. This means that you can feel confident updating the files outside of the control panel, knowing that the changes will immediately reflect on your website. Occasionally, when using templates as files, you may find that a file for a template has gone missing. ExpressionEngine has a utility to synchronize the templates periodically to ensure that the templates in the database match the content of the files and that there are files for every template. To run this, you can go to Design | Templates | Synchronize Templates. The screen will summarize whether the templates are in sync or if the files are newer than the database templates. If any are not in sync, check which templates you want to sync and click on Submit to update the database with the updated files (as well as recreate any template files that may have accidentally gone missing). For more information on templates as files, see the ExpressionEngine documentation at http://expressionengine.com/user_guide/templates/flat_file_ templates.html
Challenges
These challenges are designed to stretch your knowledge and get you to work handson with ExpressionEngine. The answers will not necessarily be found within the chapter, but with the knowledge gained from the chapter, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to figure them out. In this chapter, you only created the home page and the Individual/Family page. Go ahead and create the Small Business, Contact Us, and Promotions page. Leave out the Frequently Asked Questions page. You will convert this page in the next chapter.
Summary
In this chapter, you have seen how to build a complete website using ExpressionEngine. You have taken advantage of many of ExpressionEngine's features to reduce repetition and make your website as simple to maintain as possible. In the next chapter, you will learn more about channels and how you can use ExpressionEngine to turn the Frequently Asked Questions page of Ed & Eg's website into a more interactive experience for your visitors. [ 101 ]
Moving a Website to ExpressionEngine
The key points to remember after working through this chapter are: •
Custom fields, categories, and statuses can all be customized on a perchannel basis (or different channels can share the same custom fields, categories, or statuses). This lends itself to enormous flexibility in how you design your channel (but also means there is usually more than one way to accomplish anything in ExpressionEngine).
•
When creating a new channel, you create custom fields/statuses and categories for the new channel (optional), create the channel itself, create content inside the channel, and create or modify templates to display the channel content. These steps can be completed in any order and are usually iterative.
•
Preload text replacements are useful as constants, allowing you to take a line of text that is repeated throughout a template, such as the channel name, and define it in one place.
•
Global variables can be used for static text, HTML, or scripts that are used in more than one template. Therefore, by using this, if you want to make a change, you only have to update the global variable, rather than every template that might be using that code.
•
Snippets are like global variables, except that they also allow ExpressionEngine code and tags.
•
Embedded templates are like snippets, except that they allow variables to be passed to them to dynamically vary the output.
[ 102 ]
Creating a Fully-Equipped Channel So far you have used ExpressionEngine to create a website where you can easily edit the content through the Publish screen in ExpressionEngine and where it is easy to add new pages, should you wish to. In this chapter, you are going to take your ExpressionEngine-powered (but still static) website and enhance it to make it interactive. The Frequently Asked Questions page is an ideal candidate for this. Currently, there are only two questions on the page. However, Ed & Eg would like to start posting new questions and answers regularly. The frequently updated content would encourage visitors to keep coming back to the site. Although Ed & Eg is the example in this chapter, the concepts could easily be applied to any regularly updated content that you would want to post on your website; including a regular blog, book reviews, recipes, or products that you are selling. You will be: •
Displaying multiple entries
•
Allowing visitors to browse entries and select the ones that interest them
•
Allowing visitors to comment on entries, just like they might comment on a blog posting
•
Creating a feed to allow visitors to keep up with new entries using their favorite news reader (such as Google Reader)
From what you learned in the last chapter, you should now be familiar with the process of creating a channel, creating custom fields, posting content, and creating a template to display the content. You will follow that same process in this chapter.
Creating a Fully-Equipped Channel
Designing your channel
One of the biggest benefits to using ExpressionEngine is the ability to customize your channel fields. This allows you to really tailor the fields to the content that will be in the channel. In this case, you are creating a channel for Ed & Eg's Frequently Asked Questions. You will need two text fields—one for the question and one for the answer. By splitting up the question and answer fields in this way, you gain the ability to display the question separately from the answer—a design you will take full advantage of. You will create a multiple-entry page where visitors can see the various questions that have been asked and (hopefully) be tempted to click to find out the answers. When they click on a given question, the visitor will be taken to a single-entry page where the question and the answer will be displayed, along with comments from other visitors, with the ability to add their own comments. This design of single and multiple-entry pages is actually fundamental to ExpressionEngine. The key differences between the two types of pages are: 1. A multiple-entry page displays the content from more than one entry in your channel. You can choose to display all the information from the channel or just a teaser (such as only the question, but not the answer). You have control over how many entries are displayed on a page and how they are displayed. A multiple-entry page can change frequently—if a visitor bookmarks a multiple-entry page and returns at a later date, the page will likely reflect new content. 2. A single-entry page displays the content from only one entry in your channel. The content does not change over time (unless you edit the entry in question). This means that a visitor can bookmark the URL or e-mail it to a friend, and when they return, they will see the same content that they originally saw (plus any new comments). A single-entry page is required to accept comments for a specific entry and to display those comments. The URL for a single-entry page is determined by the URL Title on the Publish screen for the entry. A single-entry page URL typically takes the format of http:// localhost/template_group/template/entry_url_title, whereas a multiple-entry page URL would not have the entry_url_title at the end. ExpressionEngine uses the URL to dynamically determine what content to display using each template. If the URL has the URL Title of an entry in it, ExpressionEngine will only display that entry. If the URL does not have the URL Title of an entry in it, ExpressionEngine will return as many entries as meet the criteria in the parameters of the {exp:channel:entries} tag. [ 104 ]
Chapter 5
The includes/.website_page template that is used to display content from the website channel is actually an example of a multipleentry page. However, you used the parameter url_title to limit the number of entries to one specific entry.
In general, not all channels need both single and multiple-entry pages. However, it's good practice to have single-entry pages for channels with content that a visitor might want to bookmark and return to. Furthermore, if your channel allows visitors to leave comments on your posts, a single-entry page is required. Whether or not to allow comments is, in fact, a design decision in itself. Although it can encourage visitors to engage with your brand, having a website that allows comments but does not have any can be worse than not allowing comments at all. Ed & Eg have a plan to ensure their website will receive comments once it goes live.
Creating your custom channel fields The custom fields you are going to create are: • •
faqs_question faqs_answer
The question and answer fields will be Textarea fields with Auto formatting. This formatting will put line breaks between paragraphs in the answer, but will not wrap the question and answer in paragraph tags. The benefit to doing this is that you can put an A: at the beginning of each answer in your template and know that the first paragraph of the answer will be on the same line. 1. From the top menu of the control panel, select Admin | Channel Administration | Custom Fields. Now select Create a New Channel Field Group.
[ 105 ]
Creating a Fully-Equipped Channel
2. Use a Field Group Name of faqs, as this field group will only be suitable for the Frequently Asked Questions channel. Click Submit. 3. Select Add/Edit Custom Fields for your faqs field group, and then select Create a New Custom Field.
4. The first field to create is the Question field. The Field Type will be Textarea. Give it a Field Label of Question and a Field Name of faqs_question. Leave the Field Instructions blank (these appear only on the Publish page).
5. This will be a required field and will be searchable. Say Yes to show this field by default and do not change the value of the Field Display Order. 6. The Textarea Rows can be left at 6. Set the Default Text Formatting to Auto and say No to allowing an override on the Publish page. Leave the Text Direction as Left to Right and say Yes to show the Formatting Buttons, Smileys, Spellcheck, Writemode and File Chooser. Leave everything else set to No.
[ 106 ]
Chapter 5
7. Click Submit. 8. Go ahead and create the field Answer (faqs_answer) with the same settings as the faqs_question field. 9. Once your fields have been created, your Field Group should look as follows:
That's it! Your custom fields have been created and you can now move on to creating some custom categories.
[ 107 ]
Creating a Fully-Equipped Channel
Creating your categories
In the last chapter, when you created the website channel, you did not create categories because there was no need to organize your content by category. In this chapter, since the number of questions in your channel could quickly become numerous, it makes sense to use categories to relate questions to each other (and hopefully keep your visitors browsing longer). 1. To create a new category group, go to Admin | Channel Administration and then Categories.
2. Select Create a New Category Group. 3. Call the new category group FAQ Categories and select Allow ALL HTML from the formatting drop-down box. Ignore the options about editing and deleting categories—if you had other member groups with administrative control panel access, you could have granted them permission to edit and/ or delete categories in this category group. ExpressionEngine automatically recognizes that no other member groups have administrative control panel access at the moment.
[ 108 ]
Chapter 5
4. Click Submit. 5. You have now created a category group, but you have not yet created any categories. From the Category Management screen, select Add/Edit Categories for the FAQ Categories group. 6. At the top right, select Create a New Category.
7. For now, you will have two parent categories (Life Events and General Advice) as well as a number of sub-categories. Name this first category Life Events. The Category URL Title will default to life_events. Leave the Category Description blank and do not assign an image to your category. Leave the Category Parent set to None and click Submit.
8. Back on the FAQ Categories screen, select Create a New Category again.
[ 109 ]
Creating a Fully-Equipped Channel
9. Your first sub-category will be Going to College (with a URL title of going_ to_college). Type in a short category description such as Questions relating to college/university. Under Category Parent, select Life Events. Do not select a Category Image. Click Submit.
10. The rest of the categories will be set up similar to the two already created (except that the names, URLs, and descriptions will be different). Create the following categories/sub-categories and go ahead and make up your own descriptions; later, you will display the descriptions on your website, so be sure they are full sentences. Category Name
Category URL Title
Category Parent
Getting Married
getting_married
Life Events
Having a Baby
having_a_baby
Life Events
Changing Jobs
changing_jobs
Life Events
Retiring
retiring
Life Events
General Advice
general_advice
None
Budgeting
budgeting
General Advice
Buying a Car
buying_a_car
General Advice
Buying a Home
buying_a_home
General Advice
Debt
debt
General Advice
Savings
savings
General Advice
Investments
investments
General Advice
[ 110 ]
Chapter 5
Your categories have been created. If you want to, you could use the arrows on the left-hand side to re-order the fields (currently, they are ordered alphabetically).
Now that you have created your custom categories, the next step is to create your FAQ channel. Note that you could create your channel first and then create your categories and your custom fields afterwards. However, if you do this, you would then have to go back and edit your channel to associate it with your custom fields/categories. By creating your categories/custom fields first, you can associate the category/custom field group when you create your channel.
Creating your new channel
As you have previously seen, a channel contains content. In this chapter, the questions Ed & Eg get asked and their answers are your content. You have already built new custom fields and a new category group for your channel. You do not need a new custom status group; the open and closed statuses that are in the pre-existing Statuses status group are all you need. 1. From the control panel top menu, select Admin, then Channel Administration, and then Channels. Now select Create a New Channel. [ 111 ]
Creating a Fully-Equipped Channel
2. The Full Name for your channel will be FAQs and the Channel Name will be faqs. Do not duplicate an existing channel's preferences, but say Yes to editing the group preferences.
3. Under Edit Group Preferences, choose a Category Group of FAQ Categories, a Status Group of Statuses, and a Field Group of faqs.
4. Further down, say No to creating new templates for this channel (you will do this later). Finally, click Submit. Your channel has now been created!
Publishing your first set of questions
You have a channel created, complete with custom fields and categories. The next step is to publish some entries so that there are some entries to work with when you start building the templates that will display your channel content. Take the initial questions from the existing questions.html page in the original Ed & Eg website that you downloaded in chapter 4. 1. From the top menu, select Content, Publish, and then FAQs. Title your first question Living Paycheck to Paycheck with a URL Title of living_ paycheck_to_paycheck.
[ 112 ]
Chapter 5
2. Open questions.html in your browser and copy the text of the question and the answer into your channel. Do not copy any of the HTML (such as paragraph tags). Also, do not copy the Q: or A: and do not worry about putting the question in italics—this can be done at the template level to save you from having to remember to do it for each and every question. Do go ahead and apply any italics in the answer by highlighting the words to italicize and then clicking the i button above the field.
3. Select the Categories tab at the top and check the appropriate categories for this entry (such as Budgeting, Debt, and Savings). Next click Submit.
[ 113 ]
Creating a Fully-Equipped Channel
4. Repeat all these steps for the second question called Giving Gifts. Select a category for this entry of Budgeting and click Submit. You now have your first entries published, but before you can see them on your website, you will need to create some templates.
Creating your FAQ templates
Earlier in the chapter, you learned about single-entry versus multiple-entry pages. However, in reality, a channel with more than a handful of entries needs more than one multiple-entry page to keep the number of entries on each page down to a digestible number for your visitors. ExpressionEngine, therefore, offers you three ways to organize your multiple-entry page content: 1. By Category: Organizing your entries by category involves having a category page for each category. On that page, only the entries in that category are displayed. 2. By Date: Organizing your content by date creates an archive page for each month, with only the entries in each month displayed. This technique can be combined with a mini-calendar so that visitors can select a month or even a specific day and see only the entries from that timeframe. 3. By Pagination (showing 10 entries per page): There are two types of pagination—one that shows how many pages there are and allows you to jump to a specific page (including the last page). The other is a simple Next/ Previous link that your visitors can use to traverse through your pages oneby-one. Pagination can be combined with organizing by category so that categories that have a lot of entries are paginated. You can choose one or more of the preceding techniques to organize your content. You can even use all the techniques together, paginating your multiple-entry page while also providing links for visitors to filter either by date or by category should they wish to do so. For Ed & Eg's website, the content is such that it makes more sense to organize by category than it does by date. (A new visitor to Ed & Eg is going to care less about when each FAQ was posted and care more about whether the FAQ is relevant to them). It also makes sense to use pagination to keep the number of entries on each page to a reasonable number. You will therefore create two templates—one for the multiple-entry pages (faqs/ index) so that a visitor can browse the FAQs and one for the single-entry page (faqs/browse) where visitors can read an individual FAQ and post their own comments. Within the multiple-entry page template, you will use conditional statements to identify whether the page being displayed is the main multiple-entry page (with no filtering by category) or a category-specific multiple-entry page. [ 114 ]
Chapter 5
It is possible to go even further and combine the single-entry page and the multiple-entry page into a single template using conditional statements based on the URL. However, your template quickly becomes complicated when doing this, particularly if you are organizing your entries by category, by date, or by pagination, since each of these techniques results in different URLs which have to be accounted for. If this is something you are interested in doing, then a plugin such as MD Detect Page Type (http://devot-ee. com/add-ons/plugins/md-detect-page-type/) will help.
You will start by creating a basic multiple-entry page template with pagination (you will add the category archiving later). 1. First, since you are creating a new section for your website, it makes sense to create a new template group to house it in. In the control panel, click on Design, Templates, and then Template Manager. Select New Group and call the new template group faqs. Do not duplicate a group and do not make the index template in this group your site's home page. (You still want the site template group to be the site's home page). Click Submit. 2. Next, copy the includes/404 template (created in the previous chapter, or can be downloaded from http://www.packtpub.com/support or from the chapter 4 page at http://www.leonardmurphy.com/book2/chapter4) into the faqs/index template. Remove the heading and the following paragraph so that there is nothing between the and the closing . Click on Update. This will result in a page at http:// localhost/faqs with a header, sidebar and footer, but no content.
[ 115 ]
Creating a Fully-Equipped Channel
3. At the top of the template, create three new Preload Text Replacements (below). The first represents the channel name, the second represents the template group, and the third represents the single-entry template that you will create next. Each of these will be used in multiple-places throughout the template, so they are good candidates for Preload Text Replacements. {preload_replace:my_channel="faqs"} {preload_replace:my_template_group="faqs"} {preload_replace:my_single_entry_template="browse"}
4. Update the HTML attribute as follows (this is the title that appears at the top of the window): Frequently Asked Questions - Ed & Eg Financial Advisors
5. Next, write the code to display the Frequently Asked Questions' introduction. After the line, insert the following: Frequently Asked Questions
<strong>Ed & Eg 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 [email protected] and we will answer it here!
6. Now you are going to write the code to display up to ten questions on a page using pagination. This first piece of code displays the title of each entry. The limit parameter is what determines how many entries to display on each page, and the paginate parameter indicates where you would like the pagination links to appear (the choices are top, bottom, or both). Within the paginate variable pair, a conditional statement makes sure that there is more than one page of entries before displaying in order to display the pagination links. (This means that, initially, since you do not have more than ten entries, you will not see these pagination links). Insert the following code just before the line that appears immediately above
Remember that ExpressionEngine uses the URL to dynamically determine whether you are on a single-entry page or a multiple-entry page. (If the URL has the url_title of a specific entry after the template name, then ExpressionEngine recognizes that you are on single-entry page and will only display content from that entry). This means that you cannot display content from another entry (or another channel) on a single-entry page unless you tell ExpressionEngine to ignore the fact that you are on a single-entry page. This is what the dynamic="off" parameter does.
[ 135 ]
Creating a Fully-Equipped Channel
3. Next, edit all your existing templates that show the widebar (includes/. website_page, includes/404, faqs/index, and faqs/browse) and replace the widebar code with a reference to this snippet instead. For each template, delete all the code including and between to
[ 179 ]
Creating a Calendar
Now you have a blank Ed & Eg themed template (viewable at http://localhost/ calendar) that you can use for your calendar.
Creating the calendar
The next step is to create a blank calendar—it will not display any events just yet. This code is adapted from the ExpressionEngine documentation. 1. In the calendar/index template, add the following code after the Seminar Calendar line. The first piece of code is the exp:channel:calendar tag. This is a pair of tags with a number of parameters. {exp:channel:calendar switch="calendarToday|calendarCell" channel="{my_channel}" show_future_entries="yes"} {/exp:channel:calendar}
The channel parameter specifies that the entries on the calendar are coming from {my_channel}, where {my_channel} is a Preload Text Replacement corresponding to the events channel. The parameter show_future_entries="yes" means that the calendar will show future entries. In most channel applications, if you set an entry date in the future, ExpressionEngine does not make that entry visible until that date. This is useful if (say), you are going away but want to schedule new content to appear at a certain time while you are gone. In this case, if a calendar only showed entries that have already happened, it would not be a very useful calendar. The switch parameter is used to switch between two different stylesheet styles (you will create the calendar stylesheet next). If the day being displayed is not today, then the stylesheet's style will be calendarCell. If the day being displayed is today, then the stylesheet's style will be calendarToday. This allows today's date to be styled differently.
2. The next step is to start displaying the calendar itself. A calendar is a table with seven columns (one for each day of the week) so you will use the HTML table tag to display it. In the following code, you define the first row. In the top left cell, you will display > to navigate to the next month. The middle five cells will contain the name of the current month being displayed. The style calendarBG will be defined in the stylesheet that you will create in the next section. Add the following code after the {exp:channel:calendar} tag and before the closing {/ exp:channel:calendar} tag. [ 180 ]
Chapter 7
The previous and next path links both point to the current template (calendar/index). < is HTML for the < symbol and > is HTML for the > symbol. The format code to display the current month and year, %F %Y, is taken from ExpressionEngine's date formatting code, available at http:// expressionengine.com/user_guide/templates/date_ variable_formatting.html
3. Go to http://localhost/calendar and you can see the calendar beginning to take shape. Click on the arrows and you can see that the name of the month changes, as does the URL of the page. 4. The next row will display the weekdays. The code {lang:weekday_abrev} refers to the one letter weekdays. You could also use weekday_long or weekday_short to either spell out the entire weekday or the first few letters of the weekday respectively. This must be wrapped in a {calendar_ heading} variable pair. Insert the following code after the closing tag and before the closing tag.
{calendar_heading}
{lang:weekday_abrev}
{/calendar_heading}
[ 181 ]
Creating a Calendar
5. The next row will display the actual dates. There is no way to know how many rows might be needed for a given month (February might only require four rows; October might require six). ExpressionEngine dynamically determines how many rows to display using the {calendar_rows} variable pair, which repeats for as many rows as are necessary. Each row starts with the
command and ends with the closing
command. For each calendar cell, there are three possibilities—there may be events for that date; there may not be events for that date; or it may be an empty cell before the first day of the month or after the last day of the month. You want to handle each of these situations differently, so you will use conditional statements to distinguish between these three possibilities, although, right now, you will simply be displaying the date in each. Notice that, for your empty cells, you use a different class so that you can style it differently in your stylesheet. Insert this code after the closing tag and before the closing tag. {calendar_rows} {row_start}
{/row_start} {if entries}
{day_number}
{/if} {if not_entries}
{day_number}
{/if} {if blank}
{day_number}
{/if} {row_end}
{/row_end} {/calendar_rows}
You now have the beginnings of a calendar, although it looks a little basic.
[ 182 ]
Chapter 7
Before you start displaying your events on this calendar, first create some CSS to make the calendar look a little more calendar-like.
Formatting the calendar with CSS
Rather than adding the calendar styles to your main site/site_css stylesheet, it makes sense to create a separate stylesheet just for the calendar styles. This is because the calendar styles are only needed on the calendar page and do not need to be included on any other page.
Creating the calendar CSS template
First, you will create the template for the calendar CSS. Then you will point the calendar/index template to this new template. 1. From Design | Templates | Template Manager, click the calendar template group and select New Template. Call the new template calendar_css and choose a Template Type of CSS. Click Create and Edit.
2. The first line in your new template will import the main site/site_css template (so that the page outside the calendar continues to be formatted correctly). After typing this, click Update and Finished. @import url({site_url}includes/site_css);
[ 183 ]
Creating a Calendar
The {site_url} variable, which you have seen before, is converted to the actual URL to the root directory of your site, as stored in Admin | General Configuration. Note that the URL in this setting should have a trailing / (for example, http://localhost/ as opposed to http:// localhost) or the link above will not work (for example, it will resolve to http://localhostincludes/site_css instead of htttp:// localhost/includes/site_css).
3. The next step is to point the existing calendar/index template to use this new CSS template in place of site/site_css. To do this, edit the calendar/ index template and modify the stylesheet line to read as follows:
Now you can add some styles to your CSS.
Adding styles to your calendar CSS
In the calendar/index code so far, you have defined several styles: • • • • • •
calendarBG is used to format the overall table calendarHeader is used to format the month heading calendarDayHeading is used to format the weekday headings calendarCell is used for the calendar cells, except for today's date calendarToday is used for the calendar cell that represents today's date calendarBlank is used for calendar cells that are not for the dates this month
Helpfully, EllisLab provides a suggested stylesheet in the ExpressionEngine documentation (http://expressionengine.com/user_guide/modules/channel/ calendar_css.txt), which you can start with and then adapt to your own needs. 1. Open the template calendar/calendar_css for editing. Copy and paste the example code from the URL above into the CSS stylesheet (below the @ import line) and click Update.
[ 184 ]
Chapter 7
2. Next, modify the three cell styles (calendarCell, calendarToday, and calendarBlank) to position the date in the top-left of the cell (so that there is room for your event text). To do this, modify the following two styles for .calendarCell and .calendarToday and add them to .calendarBlank: text-align: left; vertical-align: top;
3. Now modify the same three cell styles to have a fixed width. Otherwise, as events are added to your calendar, some columns will expand and other columns will shrink. Add the following styles to .calendarCell, .calendarToday, and .calendarBlank: width: 60px; height: 60px;
4. Finally, you can create some styles for displaying your events. You want to keep the font clear to read but small. The following code will give each event a border, so that if there are two events on the same day, the text will not run together. Since all the events will be links (for more information), this code will also change the background color of the event when the mouse moves over it to make it clear that it is clickable. Add the following to the end of the calendar_css stylesheet: .calendarEvent a{ font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sansserif; [ 185 ]
You now have a pretty, but blank, calendar. You can, of course, go further and change the styles so that it suits your site. It is all easily configurable within the CSS. The next step is to start displaying events on your calendar. Since space on the calendar is limited, you will only display the title of the event on the calendar itself, with a clickable link for more information. (In fact, only the title field from the channel is available in the {exp:channel:calendar} tag—none of the custom field tags will work). The basic way to build the clickable link is to simply create a new, single-entry page template that you link to (just as you did with the FAQs channel). However, to keep things interesting, a new approach is called for. You will still create a single-entry page template, but rather than just linking to it directly, you will use the jQuery module combined with the FancyBox plug-in (http://fancybox.net/) to display the single-entry page in an iFrame lightbox that floats over the calendar. To accomplish this, you must first download the FancyBox tool and upload the files to your website. (FancyBox is also used in the next chapter on photo galleries). If you are removing the index.php from your URLs, then you will likely have to modify your .htaccess file so that you can access the FancyBox files. You can then create your single-entry template (and a corresponding, simplified CSS file). Finally, using the jQuery module and FancyBox, you can create a link to your single-entry template from your calendar.
[ 186 ]
Chapter 7
Note that although this chapter is using a third party jQuery plugin, the focus of this book is on using ExpressionEngine—not on learning jQuery (or FancyBox). For more information about jQuery, please visit http://jquery.com/.
Setting up FancyBox
You can download the latest version of FancyBox directly from http://fancybox. net/, or a copy of the latest version is included in the code for this chapter at either http://packtpub.com/support or http://www.leonardmurphy.com/book2/ chapter7. 1. First, download FancyBox and extract all the files from the compressed directory into a directory on your computer. 2. Once extracted, you should see a directory called fancybox, complete with a number of images, JavaScript files (.js), and a CSS file. Upload this entire directory to the root of your website. Note that for the purposes of this chapter, you do not need any of the example files that ship with FancyBox. 3. Next, if you are removing the index.php from your ExpressionEngine URLs using the exclude method, you will have to add this new directory to your .htaccess file (otherwise it will be treated as an ExpressionEngine template group, rendering it inaccessible). Open .htaccess and add FancyBox to the end of the list of real directories and files as follows (but do not create a second RewriteCond line—modify the line you already have). RewriteCond $1 !^(images|system|themes|index\.php|admin\.php|fancybox) [NC]
For an example of a complete .htaccess file using the exclude method, please see either http://packtpub.com/support or http://www. leonardmurphy.com/book2/chapter2. Your .htaccess file may include other files or directories that you have in the root directory of your website (such as robots.txt or favicon.ico) that you should leave in place. 4. To verify that your .htaccess file is not blocking access to the fancy box directory, open http://localhost/fancybox in your browser. If you see your ExpressionEngine 404 page, then your .htaccess file is treating the fancybox portion of your URL as an ExpressionEngine template group. Review your .htaccess file.
[ 187 ]
Creating a Calendar
Troubleshooting problems that are due to the .htaccess file can be challenging. Many times you set up a .htaccess file when you install ExpressionEngine and then forget that it exists, so you do not even think of the .htaccess file. Remember that EllisLab does not provide support for removing the index.php using a .htaccess file (because there are so many ways to do it and every server works a little bit differently). If you suspect your .htaccess file is causing problems, you can temporarily remove it and add the index.php back into your website URLs (in Admin | Configuration, under Name of your site's index page). If you do this, it will at least confirm whether the issue you are seeing is due to your .htaccess file or something else entirely.
5. Finally, if you are using Internet Explorer, you may want to modify fancybox/jquery.fancybox-1.3.1.css to include a / at the start of the AlphaImageLoader sources. (This tells Internet Explorer that FancyBox is a directory at the root of your website and therefore enables it to find the images it needs). The easiest way to do this is to do a find and replace and replace AlphaImageLoader(src='fancybox/ with AlphaImageLoader(src='/fancybox/
FancyBox is now in place and ready to go. Next, you will create your single-entry template, along with a pared-down CSS file.
Creating your single-entry template
First, you will create a pared down CSS file, before creating your single-entry template. Both will be much smaller versions of your regular templates/CSS (since you would not view this template on its own, but rather as an overlay on an existing page, you do not need the usual Ed & Eg header, sidebar, or footer. As a result, the template and the CSS are smaller). 1. Create a new template in the calendar template group called event_css. The template type will be CSS. Duplicate an existing template, namely, includes/site_css. Click Create and Edit. 2. Delete the input, textarea style. Further down, delete everything that appears after the /* Wrapper */ comment (including /* Wrapper */ itself). 3. Now update the body style to read as follows (essentially removing the background and adding in a four percent padding so that the text in the popup overlay will not touch the sides of the pop-up overlay box): body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; [ 188 ]
4. Finally, remove the h2 from the h1,h2 style (not the h1, h2, h3, h4 style) and instead, add it to the h3 style. The styles should end up looking as follows: h1 { font-size: 28px; } h2, h3 { font-size: 16px; font-weight: bold; }
5. Click Update and Finished to save this CSS template. 6. Next, you will create your event template. In the calendar template group, click New Template and name the template event. The template type will be Web Page. Select to duplicate the calendar/index template and click Create and Edit. This template will be visible at http://localhost/calendar/ event. 7. Delete everything between the and tags. Also, change the to be Calendar Event as follows: Calendar Event - Ed & Eg Financial Advisors
8. Next, change the stylesheet so that instead of pointing to calendar_css, it is pointing to the CSS stylesheet you just created (event_css).
9. Next, after the tag, add the following code to display the event information. {exp:channel:entries channel="{my_channel}" show_future_entries="yes" limit="1" require_entry="yes"} {if no_results} {redirect="404"} {/if} {title}
<strong>Join us on {entry_date format="%F %j%S %Y"} at {entry_date format="%g:%i%a"}
{events_description}
{/exp:channel:entries} [ 189 ]
Creating a Calendar
Notice that the show_future_entries parameter has to be included here, since this template is going to be displaying event entries that have an entry date after today's date. Also note the use of require_ entry and if no_results to ensure that only valid events can be displayed—all others will be redirected to your 404 page.
10. Next, you will display the sponsor information from the event_sponsors channel. Since you are displaying the content of the event_sponsors channel inside the events channel, ExpressionEngine needs a way to know which channel it is supposed to be displaying the data from (fields such as {title} could refer to either channel). To accomplish this, you wrap all your event_sponsors information in the tag {related_entries} using an ID that corresponds to the relationship field in the events channel (in this case, the events_sponsor custom field). You can then use the custom field names from the event_sponsors channel. The ID is a way for ExpressionEngine to support more than one relationship field in the same channel. Insert the following code after the
{events_description}
line: {if events_sponsor} {related_entries id="events_sponsor"} More About {title}
{event_sponsors_about}
{/related_entries} {/if}
You have now completed this separate, pared-down single-entry template to show more information on your calendar entries. Although the plan is to only display this template in a pop-up overlay on your calendar page, you can see what the template looks like by itself by going to a URL like http://localhost/calendar/event/
common_pitfalls_of_home_buying.
[ 190 ]
Chapter 7
Notice how the information from the Event Sponsors channel is populated into the event information. Although you only have a few events right now, so the effort of creating two channels might not seem to outweigh the benefits, if you had tens or hundreds of events, all of which shared the same handful of sponsors, being able to simply select the sponsor information from the drop-down menu represents a significant time-savings over having to type in information about the sponsor in every event. The next step is to display these entries on your calendar.
Displaying events on your calendar
To display the event on your calendar, you will use an ordinary hyperlink to your single-entry template with a special class (pop-up). The pop-up class will correspond to JavaScript in your HTML header that will call upon the FancyBox jQuery plugin to display the single-entry template in an overlay dialog box. First, you need to enable the jQuery module in your template. 1. First, verify that the jQuery module is enabled. It is enabled by default if you have installed Agile Records. Select Add-Ons | Modules from the main menu and verify that jQuery is marked as installed. If not, click Install in the Status column to install it. 2. Edit the template calendar/index.
[ 191 ]
Creating a Calendar
3. The first change you are going to make is to activate the jQuery module. In the section of the template, add the following tag: {exp:jquery:script_tag}
When saving your template, if you see a warning that no closing tag was found, do not worry. The jQuery tag is a tag that does not require a closing tag.
4. Next, you are going to include the FancyBox jQuery files that are in the fancybox directory that you uploaded to the root of your website. You will link to the main FancyBox JavaScript files, plus the CSS file. Type this code in directly underneath the above tag. <script type="text/javascript" src="{site_url}fancybox/jquery.fancybox-1.3.1.js"> <script type="text/javascript" src="{site_url}fancybox/jquery.mousewheel-3.0.2.pack.js"> <script type="text/javascript" src="{site_url}fancybox/jquery.easing-1.3.pack.js">
Note that if you downloaded the newest version of FancyBox, then the filenames and the version numbers in each of the filenames are subject to change.
5. Now you are going to include the FancyBox code for the pop-up class. This tells FancyBox how you want the lightbox to work. You want the box to be 75 percent of the width and height of the page, with no margin or padding. OverlayOpacity means that you want the calendar page underneath to still be visible, but dimmed. The hideOnContentClick means that if you click anywhere off the lightbox, the lightbox will close. The iframe type means that the lightbox will display the contents of another URL (in this case, your single-entry template URL). For more information on all the FancyBox parameters, please visit http://www.fancybox.net/api. Type this code in directly underneath the above tags (still in the section). <script type="text/javascript"> $(document).ready(function() { $(".popup").fancybox({ 'width': '75%', 'height': '75%', [ 192 ]
6. Finally, add your link with the class of popup (that corresponds to the .popup used in the above JavaScript so that FancyBox knows that you want to use FancyBox, and not actually open the link like you normally would). Add the following code after {if entries}, deleting the existing
{day_number}
line.
{day_number} {entries} {title} {/entries}
7. As one date can contain multiple events, this variable pair {entries} applies to each entry. Since this hyperlink applies to each entry, you include it within the {entries} variable pair.
[ 193 ]
Creating a Calendar
8. Go to your calendar and navigate to a month that has events to verify that you can see the hyperlinks.
9. Finally, click on one of the events to verify that your single-entry template appears with the correct information in a FancyBox overlay. If your event does not appear in a pop-up window, but rather opens in a separate window or tab, there are a number of things you can check. First, verify that the fancybox directory is at the root of your website and that you can access the files in your browser (if not, check your .htaccess file). Next, verify that the paths in the calendar/ index template point to the script/CSS files in the fancybox directory and check the filenames for misspellings.
[ 194 ]
Chapter 7
Your calendar is now complete. As you can see, the calendar functionality in ExpressionEngine is limited in what it can do and is certainly not as flexible as specialized calendar applications. However, for simpler designs, it is quite functional.
Challenges
These challenges are designed to stretch your knowledge and get you to work handson with ExpressionEngine. The answers will not necessarily be found within the chapter, but with the knowledge gained from the chapter, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to figure them out. [ 195 ]
Creating a Calendar
1. Currently, your calendar displays the days of the week using single letters (for example, M, T, W). Modify this so that the first three letters of each weekday are displayed (for example, Mon, Tue, Wed). 2. Underneath your calendar, display the next event that is coming up (no matter what month is being displayed on the calendar).
Summary
In this chapter, you took a look at the calendar functionality in ExpressionEngine. You also got to see a working example of related entries and how it can help you reduce repetition in your channels. The calendar functionality can be daunting for beginners, as there is a lot of code involved. However, once mastered, the calendar is very flexible in terms of what you can display on it, how it is displayed, and how it all works together. The key points to remember after working through this chapter: •
The calendar functionality uses all the usual channel features that you know and love—custom fields, categories, status groups, and the Publish page. You can create channels with as many custom fields as you want, although you can only display the title field on the calendar itself.
•
Related Entries is when the contents of one channel are included in another channel. Although the events calendar was a natural choice, it could be used for any kind of channel. For example, if you have a recipes channel, you may have a second channel for common sub-recipes (such as making a pie-crust). In this way, you can have 14 different recipes that call for a pie-crust and you do not need to type out the instructions to make the pie-crust 14 times. Reducing repetition by using related entries also makes your website easier to maintain and update (for example, if you wanted to adjust your standard pie recipe, you only have to do it in one spot instead of in 14 places).
•
Related Categories has nothing to do with Related Entries. Related Categories is when two entries in a channel share a category and can therefore be considered to be related.
[ 196 ]
Chapter 7
•
The jQuery module allows you to use jQuery on your website without having to download it yourself (it comes included with ExpressionEngine). ExpressionEngine also masks where the jQuery file is, so it does not reveal the location of your system directory. Teaching jQuery is beyond the scope of this book, but when used thoughtfully, it can enhance the usability of a website.
In the next chapter, you will be building a photo gallery in ExpressionEngine.
[ 197 ]
Creating a Photo Gallery Although ExpressionEngine 2 does not come with a built-in photo gallery module, it does have many features designed to make working with photos easier. In this chapter, you will create a photo gallery channel, use file manager to manage your photos, and use jQuery to display the photos on your website. This chapter uses the FancyBox jQuery plugin that you set up in the previous chapter. If you did not follow the previous chapter, please follow the instructions in Chapter 7, Creating a Calendar under Setting up FancyBox
Although this chapter focuses on building a tool for Ed & Eg to share their personal photos, the techniques in this chapter will be useful in any situation where you want to display images—whether personal photos, a portfolio of your work or items for sale.
Designing your photo gallery
There are many different ways you can approach creating a photo gallery in ExpressionEngine. At the most basic level, you have a choice between each channel entry containing only one photo (and a description) or each channel entry containing a set of photos. If you allow only one photo per entry, you can use categories to organize the photos into galleries (and you can even include the same photo in more than one gallery). If you allow multiple photos per channel entry, each entry represents a photo gallery by itself. One way to accommodate multiple photos per entry is to create as many custom fields as the photos you think you will have in a gallery. For example, if you know each gallery will have a maximum of 20 photos, then you could create 20 custom fields for the photos and 20 custom fields for the descriptions. This solution works, but is not the most flexible (that is, to add 21 photos to a gallery, you would have to modify your custom fields and your templates).
Creating a Photo Gallery
An alternative approach to accommodate multiple photos per entry without creating an abundance of custom fields is to use a third party add-on such as Matrix by Pixel & Tonic (http://pixelandtonic. com/matrix). This add-on allows for tabular data in channel entries— you define the column headings (such as the photo and the description) and then add a row in the table for each photo. In each channel entry, you can create as many rows as you need. For example, you can create one entry with 12 photos and another entry with 25 photos.
Rather than creating lots of custom fields, or using a third party add-on, this chapter will show you a simple and elegant way to create a photo gallery using the one photo per entry design and then will use categories to organize the photos into galleries. Before you create your photo gallery channel, you first need to define where your photos will be stored.
File manager
The file manager is where you can upload new photos or crop, resize, rotate, or delete the images you have already uploaded; all from within the ExpressionEngine control panel. For this photo gallery, you will create a new upload destination—this is the directory on your server where ExpressionEngine will store your photos. 1. The first step in creating a new upload destination is to create the new directory on your server. Create a new directory called photos in /images. If you are following along on an actual web server, ensure that the new directory has 777 permissions (usually right-clicking on the directory in your FTP client will allow you to set permissions). If, instead of creating a new sub-directory inside the /images directory, you prefer to create a new top-level directory and you are using the .htaccess exclude method to remove the index.php from ExpressionEngine URLs, then be sure to add the new directory to your .htaccess file.
2. Next, you need to tell ExpressionEngine where this directory is. Inside the control panel, select Content and then File Manager.
[ 200 ]
Chapter 8
3. On the left-hand side of the screen, you will see the directory or directories where you can currently upload files to (if any), along with the files currently in each directory. In the toolbar on the right-hand side, underneath File Tools, select Create New Upload Destination.
4. Enter a descriptive name of Photo Gallery. The Server Path and URL may be pre-filled, however, you should make sure they point to the actual directory you just created (/images/photos). If you are following along in a localhost environment, the URL would be http://localhost/images/ photos. Leave Allowed File Types as Images only.
[ 201 ]
Creating a Photo Gallery
5. All the fields that begin with maximum can be left blank. These fields allow you to restrict the size, height, and width of photos. If you do enter values in here, and then later try to upload a file that exceeds these limits, you will see an error message such as The file you are attempting to upload is larger than the permitted size. 6. Set the Image Properties, Image Pre Formatting, and Image Post Formatting to be blank. These fields allow you to enter code that appears inside, before, and after the img tag. However, you can format your img tag as needed inside your template.
7. The File Properties, File Pre, and Post Formatting can be ignored for now as they only apply to non-image files that you upload (and you have specified that you are only allowing images in your photo gallery). 8. If desired, you can allow certain member groups to upload files. The member groups you see listed (if any) will depend on the member groups you have. Set all the member groups to Yes except for Members, which should be set No.
[ 202 ]
Chapter 8
9. Click Submit and your new upload destination will be ready to go. Go back to the file manager and you can see the new photo gallery upload destination with no files.
Creating your photo gallery channel
Now that you have created a place to store your photos, you can create your photo gallery channel. As with every other channel you have created in this book, you will follow the same basic steps—creating custom fields and categories, creating your channel, publishing some entries, and then building your templates.
Creating your custom fields
Since you are going to have one photo per channel entry, you have a lot of flexibility to create as many custom fields for each photo as you see fit—for example, you could have fields to capture the location of the photograph, the subject of the photo, the type of camera that was used, the name of the photographer, and so forth. However, to keep things simple, you will only create two custom fields right now—one for the photo itself and one for the description. 1. From the main menu of the control panel, select Admin, Channel Administration, and then Custom Fields. 2. Select Create a New Channel Field Group and call the new group photos. Click Submit. 3. Next to the new group, select Add/Edit Custom Fields and then select Create a New Custom Field.
[ 203 ]
Creating a Photo Gallery
4. The field type will be File. The field label will be Photo and the field name will be photos_photo (the first part representing the field group name). In the instructions for the field, indicate that photos in the photo gallery should be no more than 600x800 pixels (so that they fit on a typical computer screen without scrolling). You could also prevent photos that are bigger than 600x800 pixels from being uploaded by specifying the maximum width and height in the File Upload Preferences for the photo gallery upload destination. You have not done this here because it would prevent you from being able to upload a larger photo and then re-size it using file manager.
5. The field should be required, but not searchable, and should be shown by default. The field display order should be 1 and the file type should be Image. Click Submit. 6. Click Create a New Custom Field again. This time, the field type should be Textarea, the field label Caption, and the field name photos_caption. The field instructions can be left blank. Answer Yes to it being a required field, being searchable and being shown by default. The Field Display Order should be 2. 7. The number of rows can be left as 6 and the default text formatting should be set to Auto (this will prevent unwanted whitespace in your captions due to extra paragraph tags being added, but will also allow multi-line captions). Say No to allowing an override on the Publish page. The text direction can be left as left-to-right. [ 204 ]
Chapter 8
8. Finally, say Yes to Formatting Buttons, Spellcheck, and Write mode. Say No to Smileys, Glossary, and the File Chooser. Click Submit to create the new field. Now that you have your custom fields, you can define your categories.
Creating your categories
As discussed at the beginning of this chapter, you are going to use categories to distinguish between photo galleries. To start with, you are going to create two photo galleries—one for vacation photos and one for local photos. You can always come back and add more galleries later. 1. Still in the control panel, select Admin, Channel Administration, and then Categories. 2. Select Create a New Category Group and name it Photo Categories. Select Allow All HTML in the category field formatting and check the boxes to allow other member groups to edit (or delete) categories as appropriate. (If you see a message saying that there are no member groups allowed to edit/ delete categories, this is fine too). Click Submit.
3. Back on the Category Management screen, select Add/Edit Categories for the Photo Categories category group.
[ 205 ]
Creating a Photo Gallery
4. Click Create a New Category. The first category will be called Local Photos. The Category URL will default to local_photos. Type in a category description (you will later display this on your website), leave the Category Image URL blank, leave the Category Parent set to None, and click Submit.
5. Select Create a New Category again. This time call the new category Vacation Photos, with a URL of vacation_photos. Type in a category description such as A selection of vacation photos taken by Ed & Eg. Leave the category image URL blank and the category parent as None. Click Submit.
Now that you have your category group and custom field group defined, you can go ahead and create your channel. [ 206 ]
Chapter 8
Creating your channel
The process of creating your channel is straightforward. 1. Select Admin | Channel Administration | Channels. 2. Select Create a New Channel. Call the new channel Photos with a short name of photos. Do not duplicate an existing channel's preferences. Select Yes to Edit Group Preferences and select Photo Categories for the category group, Statuses for the status group, and photos for the field group.
3. Answer No to creating new templates and then click Submit. Your channel is created! Now you can start creating some content and displaying the photos on your website.
Uploading your first photos
There are three ways to upload photos to your website. Your first option is to go to File Manager (under the Content menu) and select File Upload on the right-hand toolbar. Alternatively, you can go to publish an entry in the Photos channel, click on Add File, and upload a file. Both of these options are convenient since they use the built-in ExpressionEngine file manager to upload your file—you never have to leave the control panel. However, you can upload only one photo at a time and you may run into issues if you try and upload very large photos (greater than 2 MB).
[ 207 ]
Creating a Photo Gallery
The third option for uploading photos is to do so directly, using FTP, just as you would upload any files to your website. Since this requires another tool, it is less convenient than uploading a single photo from within ExpressionEngine, but if you are uploading lots of photos, then using FTP is a lot faster to do. That is the method we will use here. The built-in file manager also allows you to crop, resize, and rotate images (although you can take advantage of these tools even if you do not use file manager to upload the files).
1. Download the example photos (local1.jpg through local8.jpg and vacation1.jpg through vacation8.jpg) from either the Packtpub support page at http://www.packtpub.com/support or from http://www. leonardmurphy.com/book2/chapter8. (Or you can substitute your own photos). 2. Copy or FTP the photos into the /images/photos directory that you created earlier in the chapter. 3. Back in the ExpressionEngine control panel, select Content | Publish and then select the Photos channel. 4. Type in a title of Fireworks and a caption Fireworks exploding with a bang. Then select Add File. 5. The first screen to appear in the Upload File screen. Since you have already uploaded the files, you can simply select the photo gallery option in the lefthand menu. If no photos appear under the photo gallery, or the files appear but no thumbnails appear, try logging out of the control panel and logging back in. (This helps to refresh ExpressionEngine so it recognizes the new files—the first time you access the files after uploading via FTP, ExpressionEngine has to create the thumbnails).
[ 208 ]
Chapter 8
6. Select local1.jpg.
7. On the Categories tab, select Local Photos. Then click Submit. 8. Now, repeat the same steps to create entries for the rest of the photos, using appropriate captions that describe the photos. Be sure to select a category for each photo. There are 16 example photos (eight local and eight vacation photos). Having several example photos in each category will demonstrate how the photo gallery works better.
Creating your templates
As with everything in ExpressionEngine, everything that appears on your website must be coded in a template. Your photo gallery is no exception. You will now create new templates in a design very similar to the one used by the FAQs channel—a single-entry template called comment so that visitors can leave comments on individual images, and a multiple-entry page where visitors can browse and view images by category. You will start with the single-entry page.
[ 209 ]
Creating a Photo Gallery
Creating the single-entry page
The single-entry page is where an individual photograph is displayed, along with the caption and any comments. In this section, you will create a new template group called photos and then create a new template called comment (since the primary reason to visit the single-entry template will be to view and post comments). 1. From the main menu, select Design, Templates, Edit, and then Create Group. Call this template group photos. Do not duplicate a group and do not make the index template in this group your homepage. Click Submit. 2. Next, with the photos group highlighted on the left-hand side, select New Template. Call the template comment and leave the template type as Web Page. Since your single-entry page here will be very similar to the singleentry page you created for the FAQs channel, select Duplicate an existing template and then choose the faqs/browse template to duplicate. Click Create and Edit.
[ 210 ]
Chapter 8
If you did not follow Chapter 5, Creating a Fully-Equipped Channel completely and do not have an faqs/browse
template to duplicate, it can be downloaded from http:// www.packtpub.com/support or from the chapter 5 page at http://www.leonardmurphy.com/book2/chapter5.
3. Whenever you copy a template, the first thing to update is the Preload Text Replacements at the top. Update them to the following: {preload_replace:my_channel="photos"} {preload_replace:my_template_group="photos"} {preload_replace:my_single_entry_template="comment"}
4. Further down in the template, delete all the code between (but not including) the {title} and the {/exp:channel:entries}. 5. Replace the deleted code with the following code to display your image and your image caption (centered), along with a link to your multiple-entry photos/index template (which is still blank):
<em>{photos_caption}
Browse all photos
The limited class is defined in your site/site_css stylesheet as having the property max-width: 555px;. This value matches the width of the #content ID container. Although the channel field instructions ask that photos be no bigger than 600x800, they may still be too big to fit nicely into the #content area without overlapping the sidebar. The max-width property proportionally shrinks images if they are too big, but otherwise leaves the image alone.
6. A lot further down, underneath the line {/exp:comment:form}, remove the Other Questions Like This section: everything from the to the {/exp:channel:entries} inclusive.
[ 211 ]
Creating a Photo Gallery
7. Click Update and visit an example photo (such as http://localhost/ photos/comment/fireworks). If you uploaded photos with different titles, then remember that because this is a single-entry page, the last part of the URL (in this case, fireworks) is actually the URL Title from the entry to be displayed. You can replace this with the URL Title of another entry in your channel, and that entry will appear instead. Refer to Chapter 5, Creating a FullyEquipped Channel for more information on single and multiple-entry pages and how they work. If something does not look right in your single-entry page page, compare your code with the final code for the template, downloadable at either http://www.packtpub.com/support or http://www. leonardmurphy.com/book2/chapter8.
[ 212 ]
Chapter 8
Your single-entry page is complete! Go ahead and try adding comments if you like— both as a member and a visitor. Next up, you will create your multiple-entry page where visitors will be able to browse photos by category.
Creating the multiple-entry page
The multiple-entry page needs to attractively display a series of photos so that your visitors can quickly browse to the photos they are most interested in. A visitor browsing your photo gallery will likely spend a lot of time on this page. Although you will use thumbnails to display the photos on your multiple-entry page, you do not have to force visitors to go to your single-entry page in order to view a larger image. Instead, you can use jQuery and the FancyBox plugin that you used in the previous chapter. When a visitor clicks on a photo, a full-size version will appear in a FancyBox overlay, complete with caption. Visitors will be able to quickly scroll through the larger images directly from the FancyBox plug-in. Underneath each thumbnail, a link can take visitors who wish to leave comments to the singleentry page where they can do so. If you did not follow the previous chapter, please, at least, follow the instructions under the heading Chapter 7, Creating a Calendar under the Setting up FancyBox section.
Rather than re-inventing the wheel, you can base the multiple-entry page template on the calendar/index template that you created in the last chapter. (If you did not follow the previous chapter, you can download the template from http:// www.packtpub.com/support or from http://www.leonardmurphy.com/book2/ chapter7). 1. In the ExpressionEngine control panel, copy the calendar/index template code and paste it into the photos/index template. You will see a message indicating that no closing tag was found for {exp:jquery. Ignore this message as this tag is one of those that do not require a closing tag. 2. Update the Preload text replacement at the top to the following: {preload_replace:my_channel="photos"}
3. Update the to be Photo Galleries as follows: Photo Galleries - Ed & Eg Financial Advisors
[ 213 ]
Creating a Photo Gallery
4. The calendar/index template used its own stylesheet with extra calendar formatting—since you do not need to do this, change the stylesheet back to includes/site_css:
5. Your calendar uses a pop-up class attribute to display links in a pop-up iFrame FancyBox. Since you will be displaying images rather than an entire page in this FancyBox, you can set different options. Specifically, you should remove the type of iFrame, display the caption inside the pop-up box (on the calendar you had it display outside so that it did not blend in with the iFrame content), and set cyclic to true—meaning that as someone cycles through the images, once they reach the end of the set, the images will loop back to the start. Finally, do not set any limitations on the width or height of the FancyBox—you can allow the pop-up to auto-size itself to the size of the image being displayed. To accomplish all this, replace everything currently between <script type="text/javascript"> and with the following (leave the <script> tags as-is): $(document).ready(function() { $("a.gallery").fancybox({ 'cyclic': true, 'titlePosition': 'inside', 'overlayShow': true, 'hideOnContentClick': true, 'overlayOpacity': 0.7, 'transitionIn': 'none', 'transitionOut': 'none' }); });
For more information on FancyBox, including what the different options mean, you can visit http://fancybox.net/.
6. Finally, remove all the code that appears between (and including) Seminar Calendar and {/exp:channel:calendar}. This is where your photo gallery thumbnails will eventually go. Click Update to save your work so far. At this point, you have a blank page (with a relevant page title and a FancyBox script that is ready for you to start using). Now you can start adding content.
[ 214 ]
Chapter 8
Adding content to your multiple-entry page
There are going to be two ways to browse your photos—visitors may go to the main photos/index page, where they will see all your photos. Alternatively, they can go to a category-specific page, where they will only see photos that fall into that category. Just like you did with your faqs/index template, you are going to use conditional statements to distinguish between when a visitor is on a category browsing page versus when they are not. Remember that a category browsing page will have the word category in segment 2 of the URL. 1. Still in the photos/index template, add the following code after . If you are on a category browsing page, this code displays the category name, category description, and a link back to the non-category version of your multiple-entry template. If you are on the non-category browsing page, then it will display the generic title of photo galleries and some instructions on how to browse the photos. {if segment_2=="category"} {exp:channel:category_heading channel="{my_channel}"} {category_name}
<strong>Instructions: 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.
{/if}
[ 215 ]
Creating a Photo Gallery
2. Next, you can create a drop-down category selector to allow visitors to jump quickly to a given category. This code is adapted from the Channel Categories Tag documentation viewable at http://expressionengine. com/user_guide/modules/channel/categories.html#dropdown. It essentially uses a standard HTML drop-down form, populated with options from the channel categories tag that link to the photos/index template (though you specify only the template group photos, ExpressionEngine knows you mean photos/index because the index template is the default template). Add the following immediately after the previous code: <select name="selcat"onchange="location=document.catmenu.selcat.options[do cument.catmenu.selcat.selectedIndex].value;"> --Select Gallery-- {exp:channel:categories channel="{my_channel}" style="linear"} {category_name} {/exp:channel:categories}
3. Click Update and then visit your photo gallery (at http://localhost/ photos). Verify that you can browse between categories and that when you are on a category page, you see the category information, and when you are not, you see the generic instructions. JavaScript must be enabled in your browser for the drop-down menu to work.
[ 216 ]
Chapter 8
4. It makes sense to display the thumbnails in a table. Since every gallery could have a different number of thumbnails, it is impossible for you to know in advance how many rows your table might need. You will therefore use a suggestion from Mark Bowen in the ExpressionEngine wiki (http:// expressionengine.com/wiki/Entries_In_Table/) to use the {switch} variable to insert a row break (
) after every five photos. You will combine this with a conditional statement that checks to see if the current entry is the last entry, in order to prevent a superfluous row being added at the end of your table. Remember that the switch variable allows you to insert different code for different entries. Typically, it might be used to alternate the background color of entries (for example, {switch="blue|red"} would mean your first entry is blue, your second entry is red, and your third entry is blue again. The different pieces of code that are alternated are separated by a pipe (|). When there are more entries than pipes, ExpressionEngine starts again from the beginning. {switch="||||
"} means that on every fifth thumbnail the row will be ended and a new one started—there is no code between any of the other pipes. For more information on the switch parameter, please visit http:// expressionengine.com/user_guide/modules/channel/ variables.html#var_switch.
5. Add the following code immediately after the :
{exp:channel:entries channel="{my_channel}"}
***Image will go here***
{if count!=total_results}{switch="||||
"}{/if} {/exp:channel:entries}
[ 217 ]
Creating a Photo Gallery
6. If you visit your website now, you will see a table where your images will go as well as some placeholder text. If you browse between the different galleries, you will see a different number of table rows depending on the number of images that are in that category.
7. The next step is to replace the placeholder text with actual thumbnails. When designing your custom fields, you did not include a field for a thumbnail. Whilst you could include the full-size image with a small width/height, your visitors would then have to download all the full-size images in order to see this page—significantly impacting page load times. Instead, you can use thumbnails that are automatically generated by ExpressionEngine. 8. Whether you upload photos via FTP or via file manager, ExpressionEngine automatically creates thumbnails of any photos in a _thumbs subdirectory (/ images/photos/_thumbs) when you first view them in file manager. These thumbnails are used internally by ExpressionEngine, but you can also use them on your visitor-facing pages. To do this, you will use the custom File field (photos_photo) as a tag pair instead of as a single tag. This allows you to access the different components of each file (the path, the filename, and the extension) in each entry separately. By doing this, you can then insert the _thumbs subdirectory to the end of the path, and prefix the filename with the thumbs_ prefix that is automatically added to the thumbnails.
[ 218 ]
Chapter 8
For more information about using the File custom field as a tag pair instead of as a single tag, please visit http:// expressionengine.com/user_guide/modules/ channel/custom_fields.html#file_fields
9. Replace the ***Image will go here*** placeholder text with the following code:
If, after doing this, you have some thumbnails that are not showing up, you may need to log into ExpressionEngine, edit the entry in question, and re-add the photo using file manager. Make sure you can see the thumbnail in your entry before you submit it.
10. Visit your website again, and you will see thumbnails instead of the placeholder text you had before. Additionally, if you click an image, it will pop up in a FancyBox lightbox, with the caption underneath. This is because you gave the link a class attribute of gallery (which matches the class attribute you used in your FancyBox script). You can scroll through the photos in the FancyBox by clicking the left and right arrows or by using your mouse scroll wheel—this is because all the photos on the page have the same rel attribute, letting FancyBox know this is an image gallery. FancyBox treats whatever is in the title attribute as a caption—in this case, you included the {photos_caption} caption.
[ 219 ]
Creating a Photo Gallery
If your image does not appear in a pop-up overlay, but rather opens in a separate window or tab, you can check for a number of things. First, verify that the FancyBox directory is at the root of your website and that you can access the FancyBox files in your browser (if not, check your .htaccess file). Next, verify that the paths in the photos/index template point to the script/CSS files in the FancyBox directory and check the filenames for misspellings. Then, compare the photo/index template you have created with the photo/index template that is available for download from http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/chapter8. Look carefully for any spelling mistakes or typos, especially in the code and <script> sections, as well as in the link code for the thumbnails. Finally, ensure that JavaScript is enabled in your browser.
11. The final step is to include a link to your single-entry page for visitors who want to leave comments. This can be accomplished by using a hyperlink underneath each photo that will mention how many comments have already been made. Add the following code immediately before the in your template: {if comment_total=="1"}1 comment{if:else}{comment_total} comments{/if}
12. Now visit your photo gallery page and you will find the new hyperlinks. Click on one to confirm that you are taken to the single-entry page. Add a comment and verify the total increments correctly. If you have comment moderation turned on, you will have to mark the comments as open before they will be included in these counts (although if you are logged in as a Super Admin, you will be able to see the comments on the single-entry page). To mark a comment as open, select Recent Comments from the View section of the control panel home page, click on the comment you wish to open and then click View Comments. Here you can check all the comments you wish to open, and from the drop-down box, select Open Selected and click Submit.
[ 220 ]
Chapter 8
Your photo gallery is complete. You now have an easy way for visitors to browse your photos quickly, either from the main photos/index page or by gallery. It is also easy to see which photos already have comments and for visitors to add their own.
Image editing features
Now that you have gone through the process of creating a photo gallery, uploading images, and creating the corresponding templates, it is a good time to discuss how photos can be cropped, resized, and rotated all from within ExpressionEngine. 1. From the Content menu in the control panel, select File Manager. 2. If you have multiple upload destinations, it is good to know that if you click on the title of one (such as About), it will collapse the list of files. If you click again, the file list will expand. This can help reduce screen clutter. 3. If you select a filename (such as local6.jpg), a FancyBox pop-up will appear with the full size image. (Press escape or click the x in the top-right to close). 4. For the photo local6.jpg, select Edit (in the fifth column from the left).
[ 221 ]
Creating a Photo Gallery
5. At the top-right, there are three modes (Crop, Resize, and Rotate). Select Crop Mode.
6. The picture on the left will darken. To crop the photo, you can drag the rectangle over the picture until the part of the picture you want is framed. The rectangle can be resized or repositioned as needed. On the right-hand side, you can see information about the width, height, and X/Y coordinates of your crop.
[ 222 ]
Chapter 8
7. Once the rectangle is placed, click Save Image on the right-hand side to save your changes. 8. You can also resize the photo by clicking on the Resize option. In this case, setting a width will automatically adjust the height so the photo stays in proportion (and setting the height will automatically change the width). This feature is extremely useful if you want to upload a full-sized image, but then manually adjust it so the width is no more than a certain size (for example). When you upload a photo for the first time from the Publish page, you also have the option to resize an image. In this way, you can upload full-size images directly, and resize them on the fly in ExpressionEngine, rather than shrinking them in advance or uploading them and using the file manager to resize them.
Rotate mode is also fairly self-explanatory. However, be aware that selecting a different rotation (or flipping the image horizontally or vertically) automatically saves the image.
Photo gallery add-ons
In this chapter, you have walked through how to build a photo gallery in ExpressionEngine without using any third party add-ons. As you can see, the functionality in ExpressionEngine is very robust and flexible out of the box. That said, there are times when an add-on can be useful—especially if images are a large part of the content of your website. Pixel & Tonic's Matrix was already mentioned at the beginning of the chapter as a useful add-on for designing a photo gallery with multiple photos per channel entry. In addition, the following add-ons are specific to editing photos (though they are by no means representative of all the add-ons that are available. Please see Chapter 10, Extending ExpressionEngine for more information on the wide variety of add-ons that are available.).
Image sizer
http://devot-ee.com/add-ons/image-sizer/
Written by David Rencher, this plugin takes a large image, dynamically resizes it, and caches the resized image (to reduce page load times). Using this add-on in your template saves you from having to manually resize every image you upload (and eliminates the risk of breaking your page layout if you forget). Instead, images are resized on the fly. Please see Chapter 10, Extending ExpressionEngine for more information on the wide variety of add-ons that are available. [ 223 ]
Creating a Photo Gallery
Channel Images
http://devot-ee.com/add-ons/channel-images/
For a small fee, Channel Images by DevDemon allows you to batch-upload multiple files from within the ExpressionEngine control panel and simplifies image management on the Publish page.
Challenges
These challenges are designed to stretch your knowledge and get you to work handson with ExpressionEngine. The answers will not necessarily be found within the chapter, but with the knowledge gained from the chapter, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to figure them out. Since the photo gallery uses the same tools as all the other sections of your website, these exercises are not so much specific to photo galleries, but are a good reminder of the techniques learnt in previous chapters. 1. The main page of the photo gallery works great when there are only a handful of photos. However, over time, you could end up with hundreds and hundreds of photos in your channel, all of which would get displayed on your main page. Change the main page so that it limits the number of photos that are displayed and randomizes which photos are shown. 2. ExpressionEngine has the ability to track how many times a channel entry has been viewed on a single-entry page (Entry Views). Using a conditional statement, indicate on your multiple-entry template which photos are ***popular*** photos, based on the number of single-entry page views. For now, consider more than ten single-entry page views to be a sign of a popular photo. 3. The form for submitting comments and the code for displaying comments on your single-entry page are almost identical to the form for submitting comments and the code for displaying comments on your FAQs channel. In the spirit of reducing repetition, choose between a Preload Text Replacement, a Global Variable, a Snippet, or an Embedded Template and extract the code from both photos/comment and faqs/browse, so that both templates use the same code for submitting and displaying comments.
[ 224 ]
Chapter 8
Summary
In this chapter, you took a look at how to adapt the channel functionality of ExpressionEngine to a photo gallery. The lack of a formal photo-gallery module can make ExpressionEngine seem less functional. However, as you can quite clearly see, the standard channel functionality is more than adequate for the task, and indeed allows for a lot more flexibility than a separate photo gallery module might offer— with unlimited custom fields, a multitude of ways that you can organize photos within your channel (using categories and/or status groups), and with no restriction on how you can build your templates, the sky is the limit. This chapter wraps up the step-by-step introduction to ExpressionEngine. By now, you should be fairly comfortable with the basics of ExpressionEngine—channels, templates, tags, custom fields, categories, status groups, and so on. In the next chapter, you will be introduced to some more specialized first party modules that you may find useful.
[ 225 ]
Beyond the Basics So far, this book has introduced the basic concepts and the most commonly used features of ExpressionEngine. Many of the same basic skills have been used time and again such as setting up custom fields and categories, creating a new channel, posting entries to the channel, and building templates with HTML/CSS and ExpressionEngine tags. ExpressionEngine comes bundled with many other modules that may or may not be useful, given your website. The modules range from the simple to the complex—the simplest create additional tags that you can use in your templates, while the most complex include their own configuration pages and library of tags. This chapter looks at some of the offerings, including: •
The Search module
•
The Mailing List module
•
The Email module (create a contact form or a tell-a-friend form)
•
The Moblog module (submit new channel entries via e-mail)
•
The Wiki module The Mailing List and the Email modules rely on ExpressionEngine being able to send e-mails. If you are following along in a localhost environment such as WampServer, XAMPP, or MAMP, you will find that ExpressionEngine cannot send e-mails. This is because a localhost environment does not include an e-mail server. You can either follow along on an actual website server, or if you choose to follow along in your localhost environment, be aware that in places where you would expect ExpressionEngine to send an e-mail, you will not see such an e-mail.
Beyond the Basics
The Search module
ExpressionEngine comes with a pre-built search tool to allow visitors to search your site. Although technically a module, the search functionality comes pre-installed and does not have any special setup. This means that you can start using the search tags right away. There are two parts to enabling search on your website, namely: •
Creating a form that allows visitors to type in and submit search terms (this could be as simple as a search box that appears in your sidebar or it could be an entire template dedicated to an advanced search).
•
Creating templates to display the search results (or that there are no results). The Search functionality only searches channels. The Discussion Forum module and the Wiki module both have separate search functions.
When you design your search forms, you can use parameters to control what is searched. By doing this, you can limit searches to particular channels, status groups, or categories. You can also determine whether you want the search to include expired or future entries (this is important if you are searching a channel, like an events calendar, where all the entries might be in the future). Finally, you can set whether you want to search for words only in channel titles, in all the custom fields of a channel, or in the channel title, custom fields, and comments. Be very cautious if you enable your search to include future entries and the search form searches more than one channel. While one channel might routinely have entries in the future that you want to be searchable, another channel might have future-dated entries that you want to keep hidden until that date/time. The parameters you set for your search form (such as whether to include future-dated entries) apply to all channels that you allow to be searched from that form.
In addition to the search tags, there are three settings in the control panel that control how the search behaves:
[ 228 ]
Chapter 9
1. Is the field searchable? Each custom field in ExpressionEngine can be set to either be searchable or not searchable. Having this field set incorrectly on your custom fields can mean entries not being found that otherwise would be. As a general rule, fields that contain content such as sentences and paragraphs should be set to searchable, but fields such as drop-down boxes or files should not be searchable. To change the searchable setting for any individual field, go to Admin | Channel Administration | Custom Fields, and then select the field group and the field you wish to edit. You could create a custom field on a channel that is searchable, but that is not displayed on your website. This field could then be used to store likely search-terms for each individual entry that might not otherwise appear in the article (such as variations in spelling), thus improving the possibility that meaningful results are returned for people searching your website.
2. Search Page URL. Each channel has a path that is used to link the search results to the actual entries that were found. If this path is set incorrectly, clicking on a given search result will send the visitor to a wrong page. The field should be set to the single-entry template for the channel. (For example, the Photos channel should be set to http://localhost/photos/ comment). To change this setting for a given channel, go to Admin | Channel Administration | Channels, then click Edit Preferences for a specific channel, and look under Path Settings. 3. Which field should be used for search excerpt? This is also found under Channel Preferences, under Administrative Preferences. This defines the custom field from which the excerpt displayed on the results page comes from. To demonstrate the search functionality, you will create a search box in the sidebar that searches both the FAQs and the Photos channels. Before you begin, ensure that the Search Page URLs for these two channels are set to http://localhost/faqs/ browse and http://localhost/photos/comment respectively.
Adding a search box to your site
In this section, you will create a search box in the sidebar for Ed & Eg's website, thus allowing visitors to start a search from any page they like. 1. Go to Design | Templates | Snippets and edit the website_sidebar snippet.
[ 229 ]
Beyond the Basics
2. In the snippet, add the following code immediately after the final and before the final . Notice the parameters—the channel parameter restricts the search to the FAQs and Photos channels. The search_ in="everywhere" parameter means that you want the search to include titles, custom fields, and comments. The where="any" parameter means that entries containing any of the searched-for words will be returned (as opposed to requiring an exact match). The status parameter means that you will include entries with a status of open or premium (the premium status was one that you created in Chapter 6, Members, and if you did not include it explicitly, only entries with an open status would be searched). Finally, the result_page and no_result_page define which templates should be used when there are results or when there are no results (in this case, the search/ index and search/noresults templates, which you are yet to create). The rest of the code is a standard HTML form (although the input box must have the name="keywords" attribute for the search form to work). For more information on each of these parameters, including alternative settings for them and additional parameters not included here, please visit http://expressionengine.com/user_guide/modules/ search/simple.html.
3. If you visit the home page of your website, you should now see the search box on the right-hand side. If you have the Agile Records example website template groups still installed, searching will result in the Agile Records themed advanced search template being returned—otherwise, you would get a 404 page. You will create the search result templates next.
[ 230 ]
Chapter 9
Creating a search results template
The search results template is specified in the parameters of the search form as search, which translates to the search/index template. Had you not defined a specific template, the search results template would be set to search/results. If Agile Records is installed, then you are likely to already have a search template group which you can adapt to display your results. Otherwise, go ahead and create a search template group now. 1. The first step is to start with your basic site outline (header, sidebar, and so on). You can accomplish this by copying the includes/404 template into the search/index template. Edit the search/index template and paste in a copy of the code from includes/404. 2. Change the title of the page to be: Search Results - Ed & Eg Financial Advisors
3. Change the heading to be Search Results: Search Results
4. Replace the next paragraph (that talks about the page not existing) with the following. The {exp:search:keywords} tag displays the keywords used for the search.
You searched for <em>{exp:search:keywords}.
If you see a warning about there not being a closing tag when you save your template, ignore it. The {exp:search:keywords} tag is one of those that does not have a corresponding closing tag.
[ 231 ]
Beyond the Basics
5. Underneath the preceding paragraph, insert the following code (adapted from the code found at http://expressionengine.com/user_guide/ modules/search/results.html). This displays your search results in a two-column table. The first column will have the entry title and the second column will have an excerpt from the entry (the first 50 words from the field designated as the search excerpt field in your channel preferences). First create the table and the header row.
Title
Excerpt
{if paginate} <span>{page_count} {paginate} {/if}
The pagination code at the end works similarly to channel pagination—allowing a long list of results to span multiple pages.
6. The following code uses the {exp:search:search_results} tag to display the actual results. This tag loops through once for each result you have. In this case, a new table row is created for each result. The switch tag makes the first row light-gray, the next white, the third light-gray, and so on. (Remember from the photo gallery chapter that the switch tag uses the first switch for the first result, the second switch for the second result, and so on, until it runs out of switches, when it starts over). Prior to the entry title, the channel name (such as Photos: or FAQs:) is added to make it clearer what kind of entry is being linked. Underneath the entry title, the number of comments that the entry has received is displayed. Add this code after the closing
of the header row, within the table you created earlier: [ 232 ]
Within the {exp:search:search_results} tag, there are some special variable tags you can use, including {auto_path} and {excerpt}. {auto_path} creates a path to the entry using the Search Page URL, defined in the channel preferences, and {excerpt} displays the first 50 characters of the excerpt field defined in the channel preferences. You can also use tags (such as {comment_total}, {author}, or {entry_date}), which are normally available in the {exp:channel:entries} tag. More information on search resultspecific tags can be found at http://expressionengine.com/user_ guide/modules/search/results.html and information on channel entry tag variables can be found at http://expressionengine.com/ user_guide/modules/channel/variables.html.
[ 233 ]
Beyond the Basics
7. Now click Update and Finished, go to your website, and search for something (for example, money). Your results will be displayed.
The no-results template
One other template you defined in your website_sidebar snippet was a no_ result_page of search/noresults. This can be a simple template that uses {exp:search:keywords} to display the search term and indicates that no results were found.
1. In the Search template group, create a new web page template called noresults. If you already have a results and a no_results template in the search template group, you can go ahead and delete these. 2. When creating the template, select to duplicate an existing template and duplicate search/index. Click Create and Edit. 3. Delete all the code from (and including) the immediately above the
opening tag down to (and including) the closing {/if} statement of the {if paginate} block of code. 4. Modify the You searched for… paragraph to read as follows:
[ 234 ]
Chapter 9
You searched for <em>{exp:search:keywords}. Unfortunately, nothing matching that search was found.
5. Click Update and Finished (ignoring any warnings about there being no closing tag) and now try searching for something that you know is not part of your website (for example, monkey). You will be redirected to your search/ noresults template.
Advanced search
In addition to the {exp:search:simple_form} that you used in your sidebar snippet, you also have the option of creating an advanced search form using the {exp:search:advanced_form} tag. The advanced search form allows visitors to select many of the settings that you set in the parameters of the simple search form. For example, on the simple search form, you specified which channels could be searched, whereas on the advanced search form, you can allow visitors to select which channels they can search in (although you can limit the choices they see by using parameters, just as you did with the simple search form).
[ 235 ]
Beyond the Basics
To build an advanced search form, you can create a template, such as search/ advanced, and then adapt the code from http://expressionengine.com/user_ guide/modules/search/advanced.html. This form looks much more complex than the simple_form, but most of that complexity comes from building all the form fields—how the form works is the same. Although an advanced search form on a small website like Ed & Eg would be overkill, an advanced search tool can enable power users to find what they are looking for on websites that have large amounts of content.
The Mailing List module
ExpressionEngine comes with a Mailing List module included. It is a very straightforward module that allows you to quickly and easily send e-mails to visitors who have signed up to receive e-mails or to specific member groups. You can have as many mailing lists as you want. Remember that if you are using a localhost environment such as WampServer or MAMP, ExpressionEngine will not be able to send outgoing e-mails. You will be able to follow the steps to set up a mailing list and make the sign-up box available on your website, but you will not be able to use the Mailing List module to send e-mails.
Setting up the Mailing List
The Mailing List module is included with ExpressionEngine, but is not installed by default. Installing it is easy. The following steps will show you how to do it: 1. Select Add-Ons and then Modules from the main menu. 2. Scroll down to where it says Mailing List and then click Install. 3. The Mailing List module name will turn into a clickable link. Click it to enter the Mailing List Manager. 4. To start with, there is one mailing list set up called Default Mailing List. You can change the name of the mailing list by clicking Edit next to the mailing list. You can also create multiple mailing lists by clicking Create New Mailing List at the top right.
[ 236 ]
Chapter 9
5. Click Edit Template to edit how the e-mails will look. By default, each e-mail has a footer with the unsubscribe URL (auto-generated by the Mailing List module for each e-mail address the e-mail is sent to). You can customize how this footer is worded or add text above the {message_text} variable in order to create a header for all your Mailing List e-mails. The conditionals {if plain_email} and {if html_email} allow you to distinguish between plain-text and HTML versions of an outgoing e-mail, so that people reading the e-mail in plain text do not see the HTML mark-up. For now, leave the default e-mail template as-is. 6. Also, within the Mailing List Manager, you can batch subscribe or unsubscribe people (for example, if you were transferring over a Mailing List from another application). You can also set up an administrator e-mail address, so when someone new subscribes to a Mailing List, the administrator gets notified. (Click Mailing List Preferences to do this). 7. To see who is signed up for any given Mailing List, click View next to the Mailing List name.
[ 237 ]
Beyond the Basics
Now that you have a mailing list defined, there are two more things you must do: 1. Allow people to subscribe to your mailing list 2. Send e-mails to people on your mailing list
Allowing members to sign-up
To allow visitors to sign themselves up to the mailing list, you are going to add an option to your sidebar snippet. 1. Modify the snippet called website_sidebar. 2. In the snippet, add the following code immediately after the final and before the final . This code is adapted from the mailing list documentation at http://expressionengine.com/user_guide/modules/ mailinglist/index.html. Notice that in the {exp:mailinglist:form} tag, you have a parameter called list that is used to determine which mailing list the member will be signed up for (in this case, default). The e-mail input box value is set to {email}, which is a global variable referring to the e-mail address of the currently logged in member. In this way, if a member wishes to register for the mailing list, they do not need to re-type their e-mail address.
Mailing List {exp:mailinglist:form list="default"} Join our Mailing List: {/exp:mailinglist:form}
3. Click Update and Finished. Visit Ed & Eg's home page and you will see the option to sign up for a mailing list. Note that any new visitors who sign up will receive an e-mail with a link which they must click within 48 hours in order to actually sign-up (remember that if you are using a localhost environment, you will not receive this e-mail). The mailing list is strictly an opt-in feature, with an opt-out link included in every e-mail that you send.
[ 238 ]
Chapter 9
You have set up your mailing list so that visitors can sign themselves up to it. Note that if you wanted to have multiple mailing lists, all you would need to do is change the list parameter to reflect the short-name of the mailing list that the person is signing up for. Of course, now that you have a mailing list with subscribers, how do you send them e-mails?
Sending e-mails
Before trying to send an e-mail, review your e-mail settings in Admin | Email Configuration. Here, you can define not only how e-mails are sent (PHP Mail, Send Mail, or SMTP), but you can also define which e-mail address they come from. If, for any reason, ExpressionEngine is not sending e-mails, you can also turn on Email Debugging, which will then display the error message explaining what is stopping the e-mail from being sent. The settings on this page apply to all e-mails sent by ExpressionEngine, including automated e-mails such as those that are sent as part of new member registration or when you sign up for a mailing list.
[ 239 ]
Beyond the Basics
To send e-mails, you must use the Communicate tool (under Tools in the main menu). This tool can be used in conjunction with the Mailing List module to send e-mails to people who have subscribed to a given mailing list, or it can be used on a standalone basis to send e-mails to certain member groups or specific e-mail addresses. Remember that if you are following along in a localhost environment, you will not actually be able to send outgoing e-mails.
The Communicate tool has lots of options, most of which are fairly self-explanatory. At the very top, there is a link to see previously sent e-mails. Underneath the message, you can choose between sending a plain-text or an HTML e-mail. If you choose HTML, you can optionally include a plain text alternative for recipients who cannot read HTML e-mails. On the right-hand side, you can choose which mailing lists or member groups get the e-mail (or manually type in your own recipients' e-mail addresses). If you are handtyping e-mail addresses, it is recommended that you use the BCC field so that you do not expose the e-mail addresses of recipients to other recipients. You can also define who the e-mail comes from (so that it is less likely to be treated as spam).
A checkbox at the very bottom allows you to suppress e-mails to members who have requested not to receive e-mails from administrators in their control panel settings—respecting this setting is recommended. [ 240 ]
Chapter 9
The Mailing List module is designed to make it easy to send e-mails to multiple recipients at once. If you want to send an e-mail to an individual member, you can also do so via the e-mail console, provided you have enabled this functionality for the member group you are in. Click on the Email button from either the individual member's profile or from the member list at http://localhost/member/list to access the e-mail console. See Chapter 6, Members for more information on member-facing functionality.
The Email module
The Email module gives you the ability to easily create contact forms (so that your visitors can e-mail you) and tell-a-friend forms (so that your visitors can e-mail their friends). In this section, you will see how to set up both of these forms for your website. If you installed the Agile Records example site, then the Email module will already be installed. Otherwise, it can be easily installed by going to Add-Ons | Modules and clicking Install.
Creating a contact form
Ed & Eg currently have an FAQs section, where they answer frequently asked questions from their customers and visitors. However, there is no easy way for visitors to submit their questions to Ed & Eg. In this section, you will create a new contact form so that visitors can submit their questions for Ed & Eg to answer. As you have done before, you will base the contact form template on the includes/404 template (which has the site header and other layout components, but does not have much in the way of content that needs to be changed). 1. From Template Manager, select the faqs member group and click New Template. 2. The new template will be called submit. The template type should be Web Page. Check the option to duplicate another template and select the includes/404 template to duplicate. Click Create and Edit. 3. Change the HTML to the following: Submit a Question - Ed & Eg Financial Advisors
[ 241 ]
Beyond the Basics
4. Change the title from Page Not Found to Submit a Question. 5. Delete the paragraph underneath the tag. 6. The following code is adapted from the example provided in the ExpressionEngine documentation for this module at http://
expressionengine.com/user_guide/modules/email/contact_form. html. The {exp:email:contact_form} tag displays your contact form. This tag has a parameter called recipients that allows you to specify the e-mail
address you want the final e-mail to be sent to—your visitors will not be able to see or change this address. The rest of the form is a standard HTML form with some values filled in, based on ExpressionEngine variables (the e-mail address of the member, their name, and the date/time). Add the following code underneath the header in the template, changing the recipient's e-mail address to match your own:
{exp:email:contact_form user_recipients="false" recipients="[email protected]" charset="utf-8"} Your Email:
Subject:
Message: Dear Ed & Eg:
{/exp:email:contact_form}
7. Although the form is complete as-is, you can also add code to display a CAPTCHA. Even if you are not using the CAPTCHA system now, it does not hurt to put this code in; in case you want to use it in the future, you can quickly enable it (under Admin | Email Configuration) without changing your templates. You can do this because the {if captcha} conditional prevents the CAPTCHA from displaying, unless it is set to be required. Insert this code immediately before the Submit button (after the ) within the contact form: {if captcha} {captcha} [ 242 ]
Chapter 9 Please enter the word you see:
{/if}
8. Click Update and now visit your submission form at http://localhost/ faqs/submit. If ExpressionEngine is configured to send e-mails, visitors will be able to use the form to send you e-mails easily and seamlessly from within your website.
For more information about the parameters of this form and how they can be set, please see the ExpressionEngine documentation at http://expressionengine. com/user_guide/modules/email/contact_form.html. The documentation includes useful tips in case your server host does not allow e-mails to be sent from your domain with a "from e-mail address" that is not yours. [ 243 ]
Beyond the Basics
Creating a tell-a-friend form
The tell-a-friend form works very much like the Contact form, except that instead of e-mailing a person you specify, the person can e-mail a friend of their choice. The risk with this form is that spammers might use it to e-mail advertising or other junk to third parties. To prevent this, there are several options—you can restrict this functionality to signed-in members who have activated their membership via e-mail (and then pre-fill the From field with that member's e-mail address). You can fix the message text yourself so that it cannot be edited (visitors can either send or not send the message as-is). Finally, you can require CAPTCHAs (in Admin | Email Configuration) for visitors e-mailing a friend. You may also wish to consider independent social media solutions, such as adding Facebook's Like button to your website, which allows visitors to easily share that they like your website, without the concerns that the tell-a-friend form brings. Check out http://developers.facebook. com/docs/guides/web for more information.
For this example, you will create a tell-a-friend form for the FAQs channel that is only available to members. The From e-mail address will be set as the e-mail address of the logged-in member and the message will also not be editable.
Creating the tell-a-friend template
The tell-a-friend template will be based on the faqs/submit template, which you had created for your contact form. If you did not follow the steps to create a Contact form, remember that you can download the source code from either http://www. leonardmurphy.com/book2/chapter9 or from http://www.packtpub.com/support. 1. Create a new template in the FAQs template group called friend. When prompted to duplicate an existing template, select faqs/submit as the template to duplicate. Click Create and Edit. The tell-a-friend form can also be added to the bottom of the singleentry template for your channel (in this case, faqs/browse).
2. Change the HTML to: Tell a Friend - Ed & Eg Financial Advisors
3. Change the title to Tell a Friend. [ 244 ]
Chapter 9
4. Replace everything from {exp:email:contact_form} to {/ exp:email:contact_form} with the following conditional, which checks to see if the visitor is logged in. If they are not logged in, they will not be able to tell-a-friend. {if logged_out}
Sorry, you must be logged in to tell-afriend.
{if:else} {/if}
5. After the {if:else} and before the {/if}, insert the following tell_a_ friend form (adapted from http://expressionengine.com/user_guide/ modules/email/tellafriend.html). The tell-a-friend form is necessarily longer than the Contact form because there are more fields (for the send-to e-mail address and the name of the person the e-mail is coming from). Also, notice that some of the fields in the following code are read-only because the values are being populated from ExpressionEngine. {exp:email:tell_a_friend charset="utf-8" allow_html='no' status="open|premium"} Your Email:
Your Name:
To:
Subject:
Message:
[ 245 ]
Beyond the Basics 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'}!
{/exp:email:tell_a_friend}
In this example, you use the {faqs_question} custom field to display data from your entry in the message. Indeed, ExpressionEngine is versatile enough that you can create a single tell-a-friend form for multiple channels, even if they have different custom fields. ExpressionEngine will suppress any custom fields that do not apply, based on the channel that is being sent to a friend. The status="open|premium" is because there are some entries that might have a premium status rather than open. Without this setting, any status that is not open would not render the tell-a-friend form.
6. As with the Contact form, add the following CAPTCHA code immediately before the Submit button (after the ) {if captcha} {captcha} Please enter the word you see:
{/if}
7. Now you need to create a link to the tell-a-friend form. Edit the faqs/browse template and add the following link next to the Back to FAQs link. Like the form itself, this link will only be visible to members who are logged in.
{if logged_in}Tell-aFriend | {/if}Back to FAQs
[ 246 ]
Chapter 9
8. Now if you visit a FAQs channel entry and click the Tell a Friend form, you will be brought to the faqs/friend form, where you can send an e-mail to a friend.
Word-of-mouth is one of the best marketing strategies available, and the tell-a-friend functionality allows visitors to share an entry on your site without having to a draft a special e-mail. Although this example is very locked-down, you can make it more flexible (such as by allowing visitors to edit the message). Before making changes such as that, always think of how easy it might be for a malicious person to use the form to send advertising or phishing e-mails to third parties.
[ 247 ]
Beyond the Basics
The Moblog module
So far, whenever you wanted to create content, you have had to log into the control panel and publish a new entry. The Moblog module provides a way to upload files to your website and create content directly from your Internet-enabled smart phone. The basic concept involves setting up an e-mail address which ExpressionEngine can access. When you e-mail from your phone to the e-mail address, the content can either be turned into a channel entry, or attached files can be saved to an upload location without a channel entry being created (making it an easy way to upload files to your website without FTP). The module includes ways to prevent spam or other e-mails that might also be sent to the same e-mail address from being published to your site. Unfortunately, the Moblog module can only add new content to text area custom fields. Since channels will often have other types of custom fields, does this mean that you cannot use the Moblog module? No. Take, for example, the Photos channel. There is one text area custom field (caption), but the photo itself is a File custom field. Although you cannot publish an entry to the photo channel without a photo, you can still use the Moblog module to create a closed entry with the caption you desire, and upload the photo(s) attached to your e-mail to the photo gallery upload destination. Then, when you log in to the control panel, all you have to do is edit the entry, select the photo from the file manager, and change the entry status to open. For the Moblog module to work, you must have an e-mail address that ExpressionEngine can access via POP3. Typically, an e-mail address associated with your website domain or your internet provider (ISP) would have POP3 access, but a free web-based e-mail service may or may not. Since ExpressionEngine is only reading incoming e-mails (and not sending e-mails), the Moblog module can be set up and tested even in a localhost environment.
Setting up the Moblog module
As with other modules, the Moblog module is not installed by default. Installing it is easy. 1. Select Add-Ons and then Modules from the main menu. 2. Scroll down to where it says Moblog and then click Install. 3. The Moblog module name will turn into a clickable link. Click it to enter the Moblog control panel. 4. When you first enter the control panel, no Moblogs exist. Click Create New Moblog. [ 248 ]
Chapter 9
5. First, the general settings need to be defined. Enter a full name of Photos Moblog and a short name of photos_moblog (remember that the short name is what will be used in templates). Leave the time between checks set at 15 minutes. This does not mean that the e-mail address will be checked every 15 minutes, but that if you set up a template with an {exp:moblog:check} tag, and someone visits that template and more than 15 minutes has passed since the last check, then the e-mail address will be checked. Set Moblog Enabled? to Yes and set File Archive Mode to No (File Archive Mode is where files attached to your e-mail are uploaded, but no channel entry is created).
[ 249 ]
Beyond the Basics
6. Next, choose the channel you want to post to—in this case, Photos. You can also select a default category, field, status, and author. This can be useful if, for example, you want your mobile photos to be in their own gallery or to have their own status. For this example, use a default category of None. Use a default field of Caption, a default status of Closed (since you do not want your entries to be visible until you have updated the File custom field with the photo), and a default author of you.
7. Say No to making the entry sticky (meaning that it always appears first on a multi-entry page) and Yes to allowing overrides in e-mail. This means that if you want to set the category or status differently as compared to the default, you can do so by using a special code in your e-mail—for a list of possible overrides, see http://expressionengine.com/user_guide/modules/ moblog/email_contents.html. 8. Select Photo Gallery as the upload directory. 9. The Moblog templates allow you to define exactly what will happen with your e-mails. The default is to display the text first, then any images in an img tag, and any other files as a Download File link—all within your text area. Since you do not want your images to be part of the caption, change the template to remove the {images} section as follows: {text} {files match="audio|files|movie"} Download File {/files}
[ 250 ]
Chapter 9
For more information on the different tags and parameters that are available, please visit: http://expressionengine.com/user_ guide/modules/moblog/control_panel/email_template.html.
10. Next up, you can define your e-mail settings. The e-mail server must support POP3—typically e-mail addresses associated with your website domain would have POP3 access, as would e-mail addresses from your ISP. Free e-mail services may or may not include support for POP3 access. If you already download your e-mail to your e-mail software using POP3, then the same settings that are in your e-mail client (server name, username, and password) would go here. Since the Moblog module is scanning for incoming e-mails and does not send e-mails, the Moblog module will work even if you are using a localhost environment. Simply set the settings to the e-mail address you want to scan.
11. Further down, you can specify a word or phrase that must appear in the subject of your Moblog e-mails. This allows ExpressionEngine to distinguish between a Moblog e-mail and all the other e-mails you may receive. The default setting is moblog:, meaning that any e-mail you want posted to your Photos channel needs to have moblog: in the subject. (When setting the title of the entry, this phrase will be stripped out and the rest of the subject will be used; for example, Moblog: Flower will result in an entry called Flower.) Changing the subject prefix is useful when you want multiple Moblogs to use the same e-mail address. However, for the purposes of this example, leave it set as moblog:. 12. For security, you can also set your Moblog e-mails to be from a certain e-mail address (or addresses) and you can require authentication (meaning your control panel username and password must be included in your Moblog e-mails). It is recommended to at least limit the e-mail addresses that can send Moblog e-mails. 13. The next option allows you to prevent certain text that might be included in your e-mails (such as your signature) from appearing in your channel entry.
[ 251 ]
Beyond the Basics
14. Next, you can set the parameters for any images you attach—you can require images to display with a certain height or width, you can resize, you can upload images automatically, and you can also create thumbnail images if desired. For now, say Yes to resize images on import, and resize any images to have a width of 555. Leave the height set to 0 to keep the image in proportion.
15. Finally, click Submit to create your Moblog.
Setting up your template
If you were using the Moblog module to post content directly to your website, you could set up a template to check for new Moblog entries automatically whenever it is accessed by a visitor. With the following tag, ExpressionEngine will check to see if 15 minutes have elapsed since the last check, and if so, ExpressionEngine will check again:
silent="true" means that the Moblog check will be invisible to the person viewing your template. For troubleshooting purposes, you could temporarily set this to false. If you do set this to be false, having the tag wrapped within an HTML comment, as shown, means that you can see any error messages by viewing the HTML source (by clicking View Source from your browser), while visitors see nothing unusual. [ 252 ]
Chapter 9
Since you are setting up your Moblog to act as an easy way to create entries without publishing them right away, this step does not apply.
Sending a Moblog e-mail
Now that the Moblog module is configured, you can try sending your first Moblog e-mail. 1. First, send an e-mail to the e-mail address you specified with an image attached. Be sure that the e-mail has a subject prefix as defined (moblog:) and comes from an e-mail address that is allowed to post Moblog entries. Do not forget the attachment!
2. Next, log into the control panel and select Add-Ons | Modules and then select Moblog. Click Check Moblog. If the Moblog module finds valid e-mails, you will see a green check mark at the top of the screen (which you can click to see more information).
[ 253 ]
Beyond the Basics
3. Now select Content | Edit and look for an entry with a title that matches the subject of the e-mail, a date/time of the current date/time, and a status of closed. Click the entry to edit it and you can see the body of your e-mail in the caption field.
4. Click Add File, select the Photo Gallery, and click on the file you uploaded. 5. Click on the Options tab and change the status to Open. Then click Submit. 6. Visit the photo album (http://localhost/photos) to see your new entry. Notice how the image was automatically resized to be 555 pixels wide, as specified in the Moblog preferences.
[ 254 ]
Chapter 9
The Wiki module
A wiki is an area of the website where visitors themselves can edit the content or create new content. One of the most famous wiki's on the web is Wikipedia (http://www. wikipedia.org/)—an online encyclopedia that anyone can contribute content to. Another example wiki is the ExpressionEngine wiki, located at http:// expressionengine.com/wiki/—a great tool for sharing how-tos and more with other ExpressionEngine users.
At first glance, it can be difficult to see the use for a wiki (especially for a website like Ed & Eg's). However, if you think of it as a collection of documents that can be shared among a group of people of any size, and updated in real time by the same group of people that actually use the content, the business advantages start to become clearer. As with any tool that requires active participation from others, it helps if you already have a group of people that is willing to participate. A wiki, more so than other tools (such as comments or a discussion forum), requires an unusually high commitment from end-users—first to build the content and then to be willing to edit and add to other people's content. To demonstrate how the Wiki module works, you will create a wiki for visitors to exchange money-saving tips and ideas. The Freelancer license does not include the Wiki module, so this section will not apply. For a complete list of what the Freelancer license includes, please see http://expressionengine.com/overview/pricing.
Setting up the wiki
As with other modules, the Wiki module is not installed by default. Installing it is easy. 1. Select Add-Ons and then Modules from the main menu. 2. Scroll down to where it says Wiki and then click Install. 3. The Wiki module's name will turn into a clickable link. Click it to enter the wiki control panel. 4. Click on Create Wiki. 5. Change the full wiki name to Money Saving Wiki and change the short name to money_saving_wiki.
[ 255 ]
Beyond the Basics
6. Leave the text formatting as Xhtml, but Allow only safe HTML (meaning that people can use standard HTML tags to mark-up their content). 7. Choose a File Upload Directory where files associated with the wiki will be stored. (You may want to create a new directory under Content | File Manager that is specifically for wiki files). If you do not select a destination, uploading files will not be possible. 8. Select which member groups can administer the Wiki module, and which member groups can use it. Administrators can delete content, mark an article as locked (so that no-one can edit it), or mark an article as moderated (meaning that users can edit it but an administrator must approve the change before it becomes visible to others). Select Super Admins as your administrating member group, and select all your member groups as users. 9. You can set up how many revisions you keep for each article and how many edits a single individual can do in a single day. For now, leave these at their defaults. 10. Set up an e-mail address as the e-mail to receive notifications when an article marked as moderated is changed. 11. You can optionally set up a namespace for you to group articles. The main advantage to using a namespace rather than a category is to set up different member groups as administrators and users. For example, Ed & Eg cater to both businesses and individuals, so if they wanted, they could have created two namespaces so that their business articles and individual articles were separated. They could then have two member groups and allow members of the business member groups to add/edit content to articles in the Business namespace but not articles in the Individual namespace. For now, leave the namespace fields blank. 12. Click Update to create the wiki. 13. The final step is to create a new template and template group for your wiki. Go to Design | Templates | Edit | Create Group and call the new template group wiki. 14. Edit the index template of the wiki template group and add the following code. You do not need to include any other HTML or ExpressionEngine tags, as this tag will create the entire wiki. {exp:wiki base_path="wiki/index" wiki="money_saving_wiki" theme="azure"}
[ 256 ]
Chapter 9
If you use a different template group or template name, change the base_path parameter accordingly. The wiki parameter is the short name of the wiki. The theme can be either default or azure. You can also create your own themes by creating a new directory in your / themes/wiki_themes/ directory and copying and modifying the files from an existing theme. See http://expressionengine.com/user_ guide/modules/wiki/wiki_templates.html for more information.
15. Now view this template in a browser (http://localhost/wiki).
How does the wiki work? The next step is to create some content.
1. On the first page of the wiki, click Edit (at the top) to edit the page.
[ 257 ]
Beyond the Basics
2. You can type in whatever text you wish, using HTML for basic text formatting. To create a link to a new article, enclose the new article's name in double square brackets. For example: Welcome to our Money Saving Wiki. Here are some moneysaving ideas: <strong>[[Shopping]]
Don't buy the name-brand of everything. Pick one or two items that you like, and for everything else, buy the store brand. Sometimes spending the extra 30 cents for the name-brand doesn't sound like much, but saving 30 cents on 30 items in a single trip, and doing 40 trips a year, will save you $360 this year!
For more money-saving tips when [[shopping]], click on the word [[shopping]].
3. In the notes section, write a brief description of the change you are making, such as "Added Tip on saving money when shopping". (This will show in the history log). Then click Submit.
4. You can now click on any one of the shopping links to be brought to a new article where you can create a new page with more text. Notice how you can have multiple links to the same article. Remember that a wiki is a multi-user environment. The intent is not to have one person create all the content, but for it to be a collaborative effort (although you may prefer to have one person add some content and develop the structure before making it more generally available).
5. The ExpressionEngine wiki also supports the use of categories. Use the following code anywhere in an article to assign the article to a Shopping category. [[Category:Shopping]] [ 258 ]
Chapter 9
You can assign an article to multiple categories. You can also assign articles to subcategories using a format such as: [[Category:Shopping:Store Brands]]
6. If enabled, you can also upload images, diagrams, and documents by clicking on File Upload on the left-hand menu. You can then embed uploaded files using either [[File:filename.txt]] (to create a link) or [[Image:image. jpg]] (to embed a picture). For more information on wiki syntax, visit http://expressionengine.com/user_ guide/modules/wiki/wiki_syntax.html.
Other ExpressionEngine modules
There are several other free modules that ExpressionEngine has which have not been covered here. •
The Discussion Forum is a module written by EllisLab but sold separately from ExpressionEngine (although it requires ExpressionEngine to run). The module leverages ExpressionEngine's Member module features, but has its own templating system and is styled via separate CSS. The best example of a discussion forum in action is the ExpressionEngine support forums (at http://expressionengine.com/forums).
•
Simple Commerce allows you to mark posts in channel entries as being for sale. You can create a channel of items for sale, set the price for each item and then accept payments through PayPal. All payment information is transferred directly between the visitor and PayPal—at no point does your website or ExpressionEngine handle payment information. Although Simple Commerce is not a fully-fledged e-commerce module, for smaller websites that do not need the complexity of a complete payment processing solution, Simple Commerce will likely meet your needs.
•
Blacklist/Whitelist is a spam prevention tool that allows you to block visitors by IP address, URL, or User-Agent. You can either block specific IP Addresses, URLs, or User-Agents, or you can enter a partial string to block anything that matches that string. You can also add items to your white-list (meaning that you could blacklist a certain IP address pattern, but make an exception for an IP address that you know is not spam). EllisLab provides a Blacklist and a Whitelist that you can download periodically to keep known spammers away.
[ 259 ]
Beyond the Basics
•
IP to Nation allows you to determine which country an IP address is associated with, and then ban visitors from that country from seeing your website (or display a flag next to comments or entries from visitors that come from that country).
•
Query is a very useful module for more advanced users, allowing you to run SQL queries against the ExpressionEngine database directly. Although it requires some familiarity with the ExpressionEngine database structure and with SQL syntax, it can allow you to display ExpressionEngine data in unique ways that might not otherwise be possible. See http:// expressionengine.com/user_guide/modules/query/index.html for examples of how to use this module within a template.
•
Referrer allows you to track which websites have links to your website that people are using to arrive at your site.
•
Statistics allows you to display certain facts about your website on a template (such as the number of people who are logged in, the date of the most recent comment, and the total number of comments that have been left on your site).
Multiple Site Manager
EllisLab also offers Multiple Site Manager for people who run multiple websites. Multiple Site Manager adds the ability to manage multiple websites from the same ExpressionEngine login (up to three sites are included with the initial purchase price, with the option to buy more if needed). The key licensing criterion is that you must be the owner of all the websites you manage. Each website is distinct in terms of templates, channels, and preferences, but addons, members, and member groups are shared across all three sites. In this way, members only have to register once for all the websites, as each of your websites can share the same modules and other add-ons (saving you from installing and configuring the same modules over and over again) and you can conveniently manage all your websites from the same control panel. Although not appropriate for everyone, Multiple Site Manager is a very powerful tool, making maintaining your websites much easier and at a lower cost than purchasing three separate licenses. More information can be found at http:// expressionengine.com/user_guide/cp/sites/index.html.
[ 260 ]
Chapter 9
Summary
In this chapter, you took a look at many of the modules that come bundled with ExpressionEngine. Some modules come pre-installed, some are included but not installed, and some have to be downloaded and installed separately. A typical module has a configuration screen (accessible via Add-Ons | Modules) and tags that can be used in templates to access the modules functionality. In the next chapter, you will be introduced to the other types of add-ons, including Accessories, Extensions, Fieldtypes, and Plugins. You will also learn about third party add-ons. Finally, you will learn key tips for running an ExpressionEngine website, including how to do database backups and version upgrades.
[ 261 ]
Extending ExpressionEngine So far, this book has taken a step-by-step approach to implementing the most popular modules in ExpressionEngine. In this chapter, you will not be building content for Ed & Eg's website, but rather looking at what else goes into maintaining an ExpressionEngine website. First, you will learn about essential maintenance tasks such as backups, restores, and upgrades. You will then be introduced to many of the most highly-rated addons that are available for ExpressionEngine before finally getting an overview of ExpressionEngine's spam controls, as well as ways to fine-tune ExpressionEngine. After completing this chapter (and the book), you will feel confident creating and maintaining an ExpressionEngine-powered website.
Backups and restores
ExpressionEngine is a database-driven application. So to back it up, you need to back up both the individual files on your web server and the database itself.
Backups
To back up ExpressionEngine, you need a tool such as phpMyAdmin. If your website is hosted by a website hosting provider, contact them and ask if phpMyAdmin or another tool is installed that will allow you to do MySQL database backups. If necessary, phpMyAdmin can be downloaded from http://www. phpmyadmin.net/. phpMyAdmin is included with local development environments, including WampServer, XAMPP, and MAMP, usually at an address such as http:// localhost/phpmyadmin (all in lower-case).
Extending ExpressionEngine
1. The first step to doing a backup is to clear all the unnecessary data from the database (such as cached templates). Log in to the control panel and select Tools | Data | Clear Caching. Select All caches and click Submit.
2. Access the phpMyAdmin control panel.
3. On the left-hand side, select the ExpressionEngine database (such as ee). After selecting the database, you are brought to a screen that shows all the ExpressionEngine tables on the left-hand side (beginning with exp). 4. In the main window, select Export from the top menu.
[ 264 ]
Chapter 10
5. On the Export page, at the top of the left column, verify that all the tables are selected.
6. All the options on the right-hand side can be left at their default settings. At the bottom, check the box Save as file. Select a Compression method of either zipped or gzipped and then select Go.
7. You are then prompted to save the file; save it to a safe place. Note that while phpMyAdmin is sufficient for smaller databases, the backup may time out when backing up very large databases. One option to work around this is to split out the database backup so that not all the tables are backed up into a single file. Another option is to look at the command line MySQL code or a utility such as My SQL Dumper (http://www.mysqldumper.de/en/).
In addition to backing up the MySQL database, it is also prudent to back up all the files on your web server, including any themes, language packs, and add-ons that may have been installed as well as any files that may have been uploaded to your File Upload Destinations (such as the /images directory).
[ 265 ]
Extending ExpressionEngine
Database restores
A backup is only useful if it is usable, and the only way to know if a backup is usable is to restore it. To test a database restore, it helps to have a second database created in phpMyAdmin (if your hosting package includes two databases). Alternatively, you can test a restore to a localhost environment. Testing a database restore using a different database or a localhost server is easy enough, but bringing up an entire ExpressionEngine website on a different database or server is more complicated. The guidelines on how you can accomplish this can be found in the ExpressionEngine wiki at http://www.expressionengine.com/wiki/.
1. If you are restoring a database to a test database, you can follow the instructions at the beginning of Chapter 1, Getting Installed to create a second database. 2. If you are restoring over the top of an existing ExpressionEngine database, you first have to delete the existing tables. In phpMyAdmin, select the database you are restoring to and select Structure from the menu at the top of the main window. Scroll all the way down and select Check All to check all the tables. In the drop-down box, select Drop. A confirmation window will appear—click Yes. Before doing this, be very sure that the database is well backed up or that losing all the data in all the tables will not be a problem.
3. Next, in the empty database, select Import from the menu in the top window. 4. Browse to the location where the database backup was saved. Leave all the other options at their defaults and click Go. [ 266 ]
Chapter 10
5. When the import is complete, there will be a message that says Import has been successfully finished.
6. If you are restoring to the same database/server that the backup was made from, make sure that the corresponding files have also been restored (including the /system directory).
Upgrading ExpressionEngine
EllisLab is always working on new versions of ExpressionEngine. These versions are often packed full of new features as well as security updates and bug fixes. Occasionally, EllisLab will put a price on a new feature (such as the discussion forum). However, the prices are very fair, and reflect the cost of development and support. Doing this keeps the cost of ExpressionEngine itself lower for those users who have no interest in the new feature.
There are two types of releases that ExpressionEngine goes through: •
A new build contains bug fixes or minor updates. It is generally not necessary to upgrade to a new build unless it contains a bug fix that you have been waiting for. Builds are numbered by date, and you can see what build you have in the footer of any page in the control panel.
•
A new version contains new features and improvements to existing functionality. A new version will include all the bug fixes and minor updates of any intermittent builds. Versions are numbered sequentially (such as 2.0.0, 2.0.1, 2.0.2, 2.1.0, and so on).
[ 267 ]
Extending ExpressionEngine
When a new version is released, ExpressionEngine will indicate this prominently on the control panel home page.
When upgrading, you can skip builds, but it is not recommended to skip too many versions. Not only will you miss out on security updates, bug fixes and new features, but if you seek support in the forums and there are significant changes between your version and the current version, you may be asked to upgrade. The instructions for updating to the latest build can be found at http://www. expressionengine.com/user_guide/installation/update_build.html and the instructions for updating to the latest version can be found at http:// www.expressionengine.com/user_guide/installation/update.html. The
instructions are basically the same, except that for a new build, you do not have to run the server update wizard. The basic instructions for upgrading to a new version are as follows: 1. Download the latest version of ExpressionEngine. Read the version update notes (step 5 at http://www.expressionengine.com/user_guide/ installation/update.html) to verify there are no changes that might have a big impact on the specific website that is being updated—for example, a compatibility issue with an add-on that is used. 2. Perform a backup of the database and ideally back up your entire website, including the system, themes, and images directories as well as the index. php file (located in the root directory of your website—though it may have been renamed as part of the ExpressionEngine installation in Chapter 1, Introduction to ExpressionEngine). 3. Take your website offline. ExpressionEngine includes an offline.html template in the /system/expressionengine/utilities/ directory that you can modify and copy to the root of your website. Rename your index. php to index_old.php and then rename offline.html to index.php. 4. If you chose to rename index.php as part of your ExpressionEngine installation, then replace the renamed file with the offline.html template instead.
[ 268 ]
Chapter 10
5. Clear your cached data. Log in to the control panel and select Tools | Data | Clear Caching. Select All caches, and click Submit. 6. On your website, rename your system and themes directories to system_old and themes_old. By keeping the directories on the server for now, it makes it easier to roll back the update if, for some reason, an issue is encountered. The official update instructions recommend renaming the new files being uploaded first, then renaming the existing files after the new files are uploaded, and finally renaming the new files to the names of the original files. This is equally effective and potentially minimizes downtime (if you wanted to keep the website up while the new files are being uploaded).
7. Upload the system and themes directories from the new ExpressionEngine version to your website. You will upload the index.php file right before the upgrade so that, for now, your website continues to reflect that it is offline. If you use additional control panel themes, such as Corporate, Fruit, or the Mobile theme, you will also need to download these themes from http://www.expressionengine.com/ and upload them to the /themes/cp_themes/ directory.
8. From the backup of your old system directory, upload the following directories to your new system directory: /system/expressionengine/third_party/ /system/expressionengine/config/ /system/expressionengine/templates/
9. Set the file permissions for /system/expressionengine/config/config. php and /system/expressionengine/config/database.php to 666 (writeable). Set /system/expressionengine/cache to 777 (writeable). 10. Now upload the index.php file, overwriting the offline template that you earlier saved as index.php. [ 269 ]
Extending ExpressionEngine
11. If this is a version update rather than a build update, point your browser to / system (for example, http://localhost/system or http://www.example. com/system) and follow the on-screen instructions to perform the update to the latest version.
12. After you see a message saying that you are running the most current version of ExpressionEngine, delete the /system/installer directory. 13. If you renamed your system directory, you will need to edit the newly uploaded index.php and update the $system_path = './system'; line towards the top of the file to reflect your renamed system directory. 14. If you mask the location of your control panel by accessing your control panel from a URL other than http://localhost/system/index.php (such as http://localhost/admin.php), you will also have to copy /system/ index.php and replace your masked-access file (such as /admin.php). Once you have done this, you will also have to update the $system_path = ''; line towards the top of the file to reflect the path to your system directory. 15. Follow the Version Specific Notes for any versions between the version you are updating to and the version you are updating from. The Version Specific Notes will contain details on any changes that need to be made above and beyond the normal upgrade changes just listed. For example, if additional files need to be uploaded, a theme or language pack has been updated, or if a new setting in the control panel needs to be defined, the Version Specific Notes is where you will find that out. If you have customized your own themes and the Version Specific Notes indicate that a theme was updated, you will have to manually update your theme with the same changes that were made to the built-in themes. Luckily, EllisLab is very good at identifying these changes in a version upgrade and at outlining what needs to be done.
16. Verify that your website is working as expected, and then delete the system_ old and themes_old directories, as well as the index_old.php file at the root of your website. [ 270 ]
Chapter 10
When you first log into the control panel, you will be warned that one or more core files have been changed—click to accept these changes. You may also receive an e-mail saying the same thing.
17. Finally, in addition to ExpressionEngine itself, modules you install (such as the Discussion Forum and Multiple Site Manager) can also be subject to new versions. For example, the discussion forum version update instructions can be found at http://expressionengine.com/user_guide/modules/forum/ forum_update.html.
ExpressionEngine add-ons
Although not open source software, ExpressionEngine has many ways in which both EllisLab and the members of the ExpressionEngine community can add to it. ExpressionEngine 2 is built on CodeIgnitor—an open source PHP web application framework also by EllisLab. CodeIgnitor is a popular framework for PHP developers, allowing rapid development of PHP web applications. For ExpressionEngine users, this means that add-on developers have the ability to build more complex add-ons (even entire applications) for ExpressionEngine by using CodeIgnitor. It also means that there is a much larger base of developers who can build ExpressionEngine add-ons. More developers building more and more complex add-ons for ExpressionEngine can only mean one thing. If there is something you need to do that is not supported natively, there is likely an add-on for it. The add-on market has grown hugely in the last few years and there are now several companies that have either started or been able to branch into developing and selling ExpressionEngine add-ons. Although this means that some add-ons come at a cost, it also means those same add-ons are likely to be high-quality, reliable tools to expand the functionality of ExpressionEngine. The best resource for ExpressionEngine add-ons is http://www.devot-ee.com/—an official EllisLab community partner.
Types of add-ons
ExpressionEngine add-ons come in five flavors, namely, modules, accessories, extensions, fieldtypes, and plugins. All add-ons are managed through the Add-Ons menu in the control panel—here you can install, uninstall, or access the configuration screens (if applicable). [ 271 ]
Extending ExpressionEngine
Modules
Throughout this book, you have been working with ExpressionEngine modules, including the Channel module, the Member module, the Comment module, and the jQuery module. A module can be simple and focused (that is, do one thing and do it well), or they can be close to applications in their own right, complete with their own control panel configuration screens and their own library of tags. Some modules are aimed at control panel users and do not add any visible functionality to the frontend of your website—an example is the Blacklist/Whitelist module, which allows you to block spammers from your website but does not change anything on your website. Other modules are designed specifically to add functionality to your website—they provide tags that can be used within templates so that you can control where this functionality appears and how it looks. The Search module works like this—it does not add any functionality to the control panel, but it allows you to add integrated searching capabilities to your website. Finally, there are modules that add functionality to both the control panel and your website. For example, the Mailing List module provides a control panel configuration screen where you can set up mailing lists and manage subscribers, and it also provides tags that you can use in templates to allow visitors to sign themselves up. Modules can read and write data to your database, making them a very powerful tool in an ExpressionEngine installation.
Accessories
Accessories are new in ExpressionEngine 2. They are the tabs that appear on the bottom of each control panel page.
ExpressionEngine comes bundled with the ExpressionEngine Info accessory installed and three other accessories that are included but not installed (Learning EE, News and Stats, and Quick Tips).
[ 272 ]
Chapter 10
To install a new accessory, you can go to Add-Ons | Accessories, and then click Install on the accessory (or accessories) of your choice (third-party accessories must be uploaded to the /system/expressionengine/third_party/ directory before they appear in this list to install). Once installed, clicking on an accessory name will open a preferences page where you can define which member groups can see the accessory and on what control panel pages the accessory appears. In this way, an accessory that is useful when creating templates (for example) can be set to appear only on Design pages of the control panel, and only to member groups that would be working with templates.
Building your own accessory is a great way to start getting into ExpressionEngine add-on development. One use for an accessory (if you build websites for clients) is that it can be used to provide easily accessible help and tips to your client, right inside the ExpressionEngine control panel.
Extensions
Extensions are a type of add-on that uses hooks within ExpressionEngine to modify how ExpressionEngine itself works. Unlike modules, extensions do not have tags that are used in templates. Instead, they modify aspects of how ExpressionEngine works. For example, there are extensions that allow you to change how CAPTCHA works, that allow you to change the page ExpressionEngine loads after a member logs in, and that allow you to change system messages so that they use a regular template instead of the template found under Design | Message Pages | User Messages. [ 273 ]
Extending ExpressionEngine
Like accessories, third-party extensions need to be uploaded to /system/ expressionengine/third_party/ before they can be enabled from the Add-Ons | Extensions control panel page. Most extensions will come with instructions on how to install them. ExpressionEngine does not come bundled with any extensions that are ready to go, but extensions are a very common type of add-on.
Field types
ExpressionEngine comes bundled with several different types of fields that can be used in entries. Throughout this book, you have used Text Input and Textarea extensively. You used File when building the photo gallery and you also used the Relationship field when building the calendar so that you could relate events in one channel to event sponsors in another. Fieldtype add-ons allow you to expand the range of fields that you can use for your channels.
Plugins
Plugins are the most basic form of add-on for ExpressionEngine. Unlike a module, plugins cannot store data in the database (though they may still query the database), and do not have their own control panels. Unlike an extension, plugins do not change the functionality of ExpressionEngine itself. A plugin works by making one or more tags available that can then be used in templates. Like other add-ons, third-party plugin directories need to be uploaded to /system/ expressionengine/third_party/ before they can be enabled from the Add-Ons |
Plugins control panel page. Clicking on the title of an installed plug-in will give you instructions on how to use it.
[ 274 ]
Chapter 10
Plugins exist for lots of nifty purposes—replacing text with other text, creating random text, converting kilograms to pounds, the list is endless. For EE2 compatible plugins and other add-ons, please visit http://www.devot-ee.com/.
Third-party add-ons and add-on developers
While there are far too many add-ons to list them all, what follows are some prominent add-on developers whose add-ons are worth knowing. This is not a comprehensive list, and it can be expected that different people would have different ideas regarding which add-ons are the most useful. Devot:ee is the best place on the web to find up-to-date information about add-ons, and EE Insider (http://www.eeinsider.com/) is another good site to follow for tips, information, and interviews on all things ExpressionEngine.
Pixel & Tonic http://www.pixelandtonic.com/
Although Pixel & Tonic is a relatively new company, Brandon Kelly has been building add-ons for many years, including the FieldFrame extension that became the basis of the Fieldtype add-on in ExpressionEngine 2. Several of Pixel & Tonic's add-ons are considered essential by ExpressionEngine developers, including: •
•
•
Matrix: This adds the ability to have tables in your channel entries. This is a huge improvement over using repeated textarea and text input fields for as many "rows" as you are likely to need. With Matrix, you can define the columns and in each entry, create as many rows as you need. Matrix can be used whenever tabular data is involved. One common use is to create photo galleries where each channel entry represents a gallery containing multiple photos (one per row) as opposed to having one photo per-entry (like you did when building the photo gallery in Chapter 8, Creating a Photo Gallery). Playa: This is a field type that works very similarly to the Relationship field that is built into ExpressionEngine, but instead of only allowing you to relate only one entry in another channel to your entry, Playa allows you to relate multiple entries in many other channels to your entry. Using the calendar example from Chapter 7, Creating a Calendar, you could have multiple sponsors for each calendar event, instead of being limited to picking just one (or having to create multiple Relationship fields). Wygwam: This adds WYSIWYG (What You See Is What You Get) functionality to ExpressionEngine's publish page. Instead of plain-text fields on the Publish page, Wygwam allows you to create content using wordprocessor-like functionality—you can add images, format, and layout the text just like you would in a word processor. [ 275 ]
Extending ExpressionEngine
Solspace http://www.solspace.com/
Solspace is a leading add-on developer for ExpressionEngine. Their work includes: •
Tag: A module that allows you to tag channel entries and organize your content by tag. You can also build a tag cloud.
•
FreeForm: A module that makes it easy to create and manage forms that collect information from your visitors.
•
User: A module that overhauls ExpressionEngine's native member functionality, bringing the default member templates into regular templates and making them much easier to customize and brand.
•
Facebook Connect: A module that adds Facebook SSO (Single Sign-On) capabilities to your website.
•
Super Search: This is a module that overhauls ExpressionEngine's native search functionality, improving the performance and allowing results to be sorted by relevance.
•
Friends: A module that updates the member functionality to be more like a social network. Members can invite each other to become friends, they can restrict their profile so that it is only visible to their friends and they can post status updates similar to Facebook or LinkedIn (at the time of writing, this module was not yet compatible with EE2).
•
Calendar: A full-featured calendar that goes far beyond what is possible with ExpressionEngine's built-in calendar functionality (the main improvement being the addition of recurring events—a key requirement of most calendar applications) (at the time of writing, this module was not yet compatible with EE2).
Newism is the author of many very popular ExpressionEngine 1 add-ons. Newism's add-ons include: •
NSM Addon Updater (previously LG Addon Updater): This accessory works with other compatible add-ons to let you know when a new version of the add-on is released. Each compatible add-on is listed in an accessory tab, along with the installed version and the latest available version.
[ 276 ]
Chapter 10
•
NSM Better Meta (previously LG Better Meta): This extension makes it easy for you to generate unique HTML meta tags for each entry without having to create custom fields in each of your channels for the meta tags (such as description, keywords, author, and so on). By having unique meta tags on your pages, your website is more search-engine friendly, potentially making it easier for people to find you through search engines. The extension can also generate search engine XML sitemaps.
•
NSM TinyMCE (previously LG TinyMCE): This is a free WYSIWYG custom field type, similar to Wygwam.
•
NSM Transplant (previously LG Replace): When creating new entries on the Publish page, this plugin allows you to insert the contents of one custom field inside the contents of another custom field. For example, if you have one or more image fields and a textarea field, you could insert a tag (called a needle) inside the text area so that the images appear within your text. (In your template, you can only place custom fields before or after each other, not inside each other).
•
NSM Live Look (previously LG Live Look): This extension allows you to view what your entry will look like on your website, directly from the Publish page.
Low has created many ExpressionEngine add-ons, including Low NoSpam, which will check comments, forum posts, and wiki articles submitted to your site against a service such as Akismet or TypePad AntiSpam to see if the submission is spam. Low Variables is another add-on that builds upon and improves ExpressionEngine's native variable management, allowing you to hide variables from other control panel users on a per-variable basis, as well as allowing you to group, sort, and label them.
nGen works http://www.ngenworks.com/software/ee/
nGen Works have built a number of ExpressionEngine add-ons, of which one of the most popular is Structure (http://www.buildwithstructure.com/). Structure bypasses the template structure of the standard ExpressionEngine website and instead allows you to define static and dynamic pages in an easy-to-use site-map view.
[ 277 ]
Extending ExpressionEngine
Other notable add-ons
The following add-ons can also be useful when building ExpressionEngine websites: •
Template Variables (by Matthew Krivanek) is a third-party accessory that displays the custom field names, snippets, and global variables that are on your site, so that you never again forget what you called a particular field, snippet or variable. The accessory includes quick links to add or edit custom fields, snippets, and global variables. Clicking a name copies the syntax onto the clipboard for easy pasting into a template (http://www.devot-ee.com/ add-ons/template-variables/).
•
Image Sizer (by David Rencher) is plugin that makes a template tag available which, when wrapped around an HTML tag, will resize the corresponding image to the size specified in the parameters and cache the resized image. This means that instead of having to require images to be of a certain size when they are uploaded to ExpressionEngine, they can be dynamically resized from within the template the first time the template is accessed. The plugin has won Devot:ee's AcademEE Plugin of the Year award multiple times (http://www.devot-ee.com/add-ons/imagesizer/).
•
First Timer (by Ryan Irelan) is an extension that allows you to alter where members are redirected to after they log in (http://www.devot-ee.com/ add-ons/first-timer/).
•
Backup (by Thomas Myer) is a module that makes it easy to do a database backup and download the file right from within the ExpressionEngine control panel—no logging into phpMyAdmin needed (http://www.devotee.com/add-ons/backup/).
•
Accessible Captcha (by Greg Salt) is an extension that changes the graphic CAPTCHA to a random question & answer system that plays well with screen-readers in a way that image-based CAPTCHAs do not. It works in much the same way as a regular CAPTCHA—making it easy for a person to complete the question, but making it difficult for an automated script to do so (http://www.devot-ee.com/add-ons/accessible-captcha/).
•
MD Detect Page Type (by Ryan Masuga) is a plugin that can be used in a template to detect what type of page is being rendered. This makes it easy to build conditional statements based on whether a page is a basic multipleentry page, a category page, a paginated page, an archive page or a singleentry page, and therefore makes it easier to use a single template for some or all of these scenarios (http://www.devot-ee.com/add-ons/md-detectpage-type/).
[ 278 ]
Chapter 10
•
Custom System Messages (by Brian Litzinger) is an extension that allows you to change the template that system messages are displayed with, allowing your system messages to share the same layout as the rest of your website and allowing you to use the full range of ExpressionEngine tags on the page (http://www.devot-ee.com/add-ons/custom-systemmessages/).
•
Channel Images (by DevDemon) is a module/extension that improves upon ExpressionEngine's native file manager functionality, including features such as multi-select image uploads from the control panel (http://www.devotee.com/add-ons/channel-images/).
•
Search Results (by Planet/EE) is a module that improves upon ExpressionEngine's default search capabilities, allowing you to group and sort search results, highlight search terms, use custom fields in search results, and more (http://www.devot-ee.com/add-ons/search-results/).
•
Cartthrob (by Chris Newton) and FoxEE (by HCC Development) are both full-featured shopping cart modules. (At the time of writing, they are not yet available for ExpressionEngine 2; http://www.devot-ee.com/add-ons/ cartthrob/ and http://www.devot-ee.com/add-ons/foxee/).
There are many more add-ons available for ExpressionEngine—more than can possibly be listed here. If there is something you wish ExpressionEngine could do (or could do differently), search the add-on library at http://www.devot-ee.com/ first.
Optimizing ExpressionEngine
Out-of-the-box, ExpressionEngine works very well, but on larger sites that attract more traffic, there are several options to fine-tune that can help you keep ExpressionEngine humming.
[ 279 ]
Extending ExpressionEngine
Spam
One downside of any website that allows members of the public to submit content is spam. Spam can take many forms, including comment spam, forum spam, and member registration spam (where spammers register as new members on your site and then place links in their profile pages), Luckily, ExpressionEngine has several tools you can use to combat spam, many of which are outlined in the ExpressionEngine documentation at http://www.expressionengine.com/user_ guide/general/spam_protection.html. Suggestions include: •
Use the blacklist/whitelist module to keep known spammers from your website and prevent content (in comments or member profile fields) that matches anything in the blacklist from being submitted. There is a oneclick option to download the latest blacklist from ExpressionEngine and you can also add items to the blacklist/whitelist that may be unique to you (downloading the list will not overwrite anything you add manually). The bottom line is that there is no reason not to use this module. (This module can be found in Addons | Modules in the control panel).
•
Require all comments to be moderated, require membership in order to post comments, or enable CAPTCHA for comment postings. If nothing else, you should ensure that you are set up to receive e-mails whenever comments are posted. All these settings can be found under Admin | Channel Administration | Channels for each channel.
•
Enable membership CAPTCHA (under Members | Preferences) or require all new member registrations to be activated manually by an administrator (though even administrators may not be able to spot spam registrations).
•
Disable New Member Registrations entirely (under Members | Preferences) if you do not plan to use the member features of ExpressionEngine. Remember that this feature is enabled by default, meaning that even if your website does not link to the member URLs, the member URLs are active. [ 280 ]
Chapter 10
•
Use Word Censoring (under Admin | Security and Privacy | Word Censoring), which allows you to replace any user-submitted word (or partial word) with the # symbol (or a word of your choice).
•
Apply Rank Denial (under Admin | Security and Privacy | Security and Sessions). This makes your website less attractive to spammers because user-submitted links point to a redirect page on your own site rather than pointing directly to the spammer's site. This means that any links posted to your website will not improve the spammers search engine page rank.
•
To prevent Denial of Service attacks, ExpressionEngine has Throttling Preferences (under Admin | Security and Privacy) that allow you to set how many pages can be downloaded in a given time period by a single person before that person is temporarily locked out.
•
Other recommendations in the documentation include setting a longer Comment Time Interval in the preferences for each channel (to prevent spammers from submitting hundreds of comments in a short space of time), using Secure Form Mode in the Security and Session preferences to prevent the same form being submitted multiple times without being refreshed and Deny Duplicate Data (also in the Security and Session preferences) to prevent the same comment being made more than once.
•
Finally, in addition to ExpressionEngine's built-in features, there are also several add-ons including Accessible CAPTCHA, Low NoSpam, and No Follow, all designed to make your website less attractive to spammers. Search for these and others at http://www.devot-ee.com/.
In summary, none of these options are a perfect solution, and there is certainly a trade-off between functionality and anti-spam controls. For example, requiring membership to post comments does not prevent a member from posting spam in comments but it at least provides an extra layer of protection.
Performance
ExpressionEngine is database-driven, and for most websites, the performance is excellent out of the box. With that said, if you are expecting high traffic volumes, it is worth being aware of (and following) good design practices as you build your website. The most fundamental technique that you can use to reduce template load times is reducing the number of ExpressionEngine tags in a template. A template that uses multiple embedded templates, nested conditionals, add-ons, and so forth involves more database queries and so will take longer for ExpressionEngine to render than a simple template with only a handful of standard ExpressionEngine tags. [ 281 ]
Extending ExpressionEngine
Other techniques to reduce page load times include the following: •
Use embedded templates, snippets, and global variables appropriately. An embedded template comes with all the overhead of rendering a template, whereas a snippet does not. So, if a snippet can be used instead of an embedded template, it should be.
•
Use the Disable Parameter liberally. By default, the {exp:channel:entries} tag fetches all the information about the channel entry that is stored in your database (including category information, member data, and the data in the custom fields). In many cases, you do not use all this data, so there is no point in retrieving it from the database. The disable parameter allows you to reduce the number of database queries by turning off queries for certain types of data. For example, you used this parameter when retrieving the entry title for the HTML in your single-entry templates. Since you only needed the title of the entry (which is not a custom field), disabling all the extra database queries made sense: disable="categories|category_fields|custom_fieldsmember_ data|pagination".
For more information on the disable parameter, visit http://www. expressionengine.com/user_guide/modules/channel/ parameters.html#par_disable.
•
Use Simple Conditionals instead of complex conditionals. A simple conditional is an if statement that evaluates one condition and does not have any if:else clauses. A simple conditional is parsed early, meaning that any ExpressionEngine tags within the simple conditional are ignored if the condition is false. More complex conditional statements (involving multiple conditions or multiple else clauses) are parsed later, meaning any ExpressionEngine tags within them are parsed, even if the condition turns out to be false.
•
Consider enabling GZIP output. This option (under Admin | System Adminstration | Output and Debugging Preferences) compresses website pages (which are then decompressed seamlessly by most modern browsers). This can result in faster download speeds.
•
Optimize ExpressionEngine's SQL tables. Under Admin | Utilities | SQL Manager, select Manage Database Tables, select all tables, and click Optimize. When run from time to time, this can help make database queries faster by eliminating database fragmentation.
[ 282 ]
Chapter 10
ExpressionEngine also includes a variety of different types of caching that can help improve performance by minimizing the number of queries needed to render a template. The benefits of enabling these options can vary depending on the server the website is hosted on (if the server already has caching enabled, then enabling caching within ExpressionEngine may cause double-caching and therefore an increase in load). More information can be found at http://www. expressionengine.com/user_guide/general/caching.html. ExpressionEngine caching is useful to reduce the number of database queries that a specific URL creates (such as your home page). However, caching is done by URL, meaning that for each new URL, a new cache is created, even if the elements on the pages at two different URLs come from the same template. Given that a single template can be the basis of hundreds or thousands of URLs (depending on the number of channel pages), websites with a lot of traffic spread over a large number of URLs may not see much benefit in page load times by caching, even if the traffic is concentrated on a small number of templates.
For sites with high traffic loads, the documentation also includes information on how to further optimize ExpressionEngine by turning off tracking and minimizing Disk I/O. Please see http://www.expressionengine.com/user_guide/general/ handling_extreme_traffic.html for more information. Solspace offers a Site Performance Evaluation for ExpressionEngine sites (http://www.solspace.com/development/ performance/) that may be worth considering for large, high-traffic websites.
Summary
In this chapter, you learned about the routine maintenance tasks that come with running a powerful database-driven website (such as database backups and software upgrades). You learned about the different types of add-ons that ExpressionEngine accommodates, and about specific add-ons and add-on developers that are worth being aware of. Finally, you learned about optimizing ExpressionEngine to fight spam and improve page-load times. The key points to remember after working through this chapter (and the book) are: •
Back up your website, including the database.
•
Upgrade ExpressionEngine when new versions are released (or at least every few versions). If you continue to use an older version, you will not have all the latest features and bug-fixes, and newer add-ons may not be compatible. [ 283 ]
Extending ExpressionEngine
•
ExpressionEngine is highly extensible, and many of the add-ons are highquality commercial grade pieces of software. If there is something you wish ExpressionEngine could do, research the add-on library first.
•
The ExpressionEngine documentation is an excellent resource—clear, concise, accurate, and with plenty of examples. It is a great way to learn about a new feature (or to learn more about a feature you are already familiar with).
•
Visit the ExpressionEngine support forums often (http://www. expressionengine.com/forums). If there is something you are trying to accomplish, the chances are good that someone else has tried the same thing. A quick search can often reveal lots of ideas. The how-to forum is a great place to get ideas, seek advice, or even get feedback.
[ 284 ]
Installing WampServer In this appendix, you will walk through downloading, installing, and setting up WampServer. This will allow you to run ExpressionEngine on your own computer. If you already have WampServer installed (or an alternative product such as XAMPP or MAMP for Mac OS X), then you can skip these instructions. WampServer is a free package that includes an easy-to-set up web server (Apache), database server (MySQL), and server-side scripting language (PHP), all of which are requirements of ExpressionEngine. Installing WampServer lets you experiment with ExpressionEngine on your own computer instead of a live website. Setting up each piece of an Apache, MySQL, and PHP (AMP) environment individually can be complicated, but with WampServer, the system comes pre-configured and ready to go, so you can concentrate on learning ExpressionEngine. You are installing WampServer as a development (or testing) environment only. You will not be using WampServer to build a live server that presents your website to the outside world. Setting up and securing a production web and database server is a topic beyond the scope of this text.
WampServer is a Windows only package. If you are using Mac OS X, MAMP is a good alternative (http://www.mamp.info). XAMPP is another alternative that is available for Windows, Linux, Mac OS X, and Solaris. If you choose to use an alternative package, the installation instructions for that package are going to be different and there may be some differences when you install and configure ExpressionEngine on your server in Chapter 2, Getting Installed. However, ExpressionEngine itself will work exactly the same.
Installing WampServer
WampServer is free to download, and the package contains the following: •
The AMP environment of Apache, MySQL, and PHP (needed to install ExpressionEngine)
•
phpMyAdmin, which is the leading web-based interface to MySQL (needed to manage the ExpressionEngine database)
Installing WAMPServer First, you must download WampServer:
1. Visit http://www.wampserver.com/en 2. On that page, there will be a link to the download page of WampServer. Select it and you should see a link to download WampServer. 3. Clicking the download link will take you to SourceForge.net where you can download the file. The file download should begin automatically, but if it does not start, there should be a direct link that you can use to start the download. If you have Internet Explorer 7 or higher, it may block the site from downloading files to your computer. A warning will appear in a small bar at the top of your browser screen. Click on it and select Download File.
4. Next you will be prompted to save the file. Save it to your Downloads, Desktop, or My Documents area. Depending on the speed of your Internet connection, the file may take some time to download. Now that you have downloaded the software, the next step is to install it. If you are running the Skype VOIP application, or IIS Server, you will need to exit them before proceeding. Apache cannot start as a service if Skype or IIS is also running as they all use port 80. If you have Skype, you can set it to no longer use port 80 by going into the Advanced page of the options screen in Skype.
1. Double-click on the file that you downloaded in order to run it. If you get a Windows security warning, click on Run. 2. A welcome screen will display. Click on Next.
[ 286 ]
Appendix A
3. A license agreement screen will display. WampServer is an open source software package released under the GNU General Public License. Accept the license agreement. 4. WAMPServer, by default, installs in C:\wamp, and that is where this book will assume it is installed.
5. Select whether you would like a Quick Launch or Desktop icon, then click on Next. 6. A summary screen will display, showing where WampServer will be installed. Click on Install.
[ 287 ]
Installing WampServer
7. The installation will take a few minutes to run, during which you will see all the files being extracted. After all the files have extracted, a dialog box will appear asking you to pick your default browser (this is used by WampServer to know what browser to use when you use WampServer shortcuts to open your website; it does not prevent you from using other browsers installed on your machine if you later wish to do so). If you have Firefox installed, it will ask if you wish to use Firefox. If you do not, browse to Internet Explorer (typically located in C:\Program Files\Internet Explorer\iexplore. exe). Click on Open.
8. The installation will run for a little longer, and then you will be prompted for your PHP mail parameters. Although ExpressionEngine does make use of e-mail (for example, when registering new members), it is not an essential part of this book. If you have an SMTP server you can use, feel free to enter the information, otherwise accept the default settings. Click on Next.
[ 288 ]
Appendix A
9. Finally, leave the checkbox to launch WampServer checked and click on Finish.
WampServer is now installed and running.
Using WampServer
When WampServer is running, you should see a new icon on your taskbar next to the clock. Clicking on this will produce a menu with useful links. (If you do not see the icon, try launching WampServer again by clicking on start WampServer under WampServer in your Start menu).
[ 289 ]
Installing WampServer
Localhost will launch your website (you can also access your website by visiting http://localhost/ in your browser). phpMyAdmin is used to manage your website databases, and we will use it in Chapter 2 to set up the database that ExpressionEngine will use. www directory will open C:\wamp\www in Windows Explorer. Any files placed in this directory will be visible on your website. This directory is therefore where you will place your ExpressionEngine installation files. The other options allow us to control the different services individually. You can stop and start services individually (or stop and start all services). You can also switch between versions and change settings specific to each service. By default, when you visit http://localhost/, you will see a WampServer home page. If you are using Internet Explorer and see a message at the top of your screen that says Intranet settings are now turned off by default, left-click on it and select Don't show this message again.
In order for us to develop our website, you should delete this welcome page.
[ 290 ]
Appendix A
This welcome page displays configuration information about your PHP installation. A comprehensive view of the same information can be accessed from within the ExpressionEngine control panel (under Tools | Utilities | PHP Info).
1. Navigate to C:\wamp\www and delete the file index.php. 2. In your browser, navigate to http://localhost/, and you should now see an empty directory listing.
Allowing .htaccess files to be used
To take advantage of some features in ExpressionEngine (such as removing the index. php from ExpressionEngine URLs), you need to use a .htaccess file, which requires the Apache module mod_rewrite to be enabled. 1. Left-click the WampServer task bar icon, click Apache | Apache Modules, and then scroll down the list of modules until you see the rewrite_module. Left-click on the rewrite_module option to enable it.
[ 291 ]
Installing WampServer
It will take a few seconds for it to enable, but then your .htaccess files will be recognized; you will be using them in Chapter 2, Getting Installed.
Summary
In this appendix, you walked through the installation of WampServer, one of several products available for simulating an Apache, MySQL, and PHP environment on your computer. Other alternatives include XAMPP and MAMP (for Mac OS X). The key points to remember after working through this appendix: •
Your website can be accessed in a browser at http://localhost/.
•
To upload files to your local website, you have to save them in C:\wamp\www.
[ 292 ]
Solutions to Exercises Most of the exercises throughout this book have more than one solution. The following are the example solutions to some of the exercises in this book. Where a solution has not been provided, the instructions in the chapter can be adapted to complete the exercise. Chapter 3, Exercise 1 To limit the entries that are displayed to 2, you need to edit the channel tag to read as follows: {exp:channel:entries channel="news" limit="2"}
Chapter 3, Exercise 2 To post a new entry to a channel, log into the control panel at http://localhost/ admin.php (or http://localhost/system/index.php), and select Content from
the menu at the top of the screen. Highlight Publish and then select the channel you wish to post to (in this case, News), and type in the new entry. Select an image and then click Submit when you are done. Chapter 3, Exercise 3 To edit an entry, you can either select Content from the main menu, then select Edit, or you can select Entry under Modify or delete. Click on the entry you wish to edit and then edit away.
Solutions to Exercises
Chapter 3, Exercise 4 Try searching for html css tutorials in your favorite search engine. A couple of good resources include: • •
If you prefer learning from a book, pop down to your local bookstore's Computing & Technology section, and you will find plenty of books. Look for ones that focus on HTML and CSS, rather than other software applications (such as Dreamweaver). Chapter 4, Exercise 1 To create new pages, select Content | Publish | Website and copy in the text from the corresponding static HTML file. Add in HTML tags for the headings (), links (using {site_url}), and italic (<em>) where appropriate, and remember that you can choose the previously uploaded picture, rather than uploading the picture again. Make sure that the URL title for each entry matches the URL title in the table below. Next, create the following template groups and select to duplicate the site template group. Then edit the index template of each group and adjust the url_title parameter to be as follows: Template Group Name
URL Title
business
small_business
contact
get_in_touch
promotion
promotion
Notice how when you enter e-mail addresses into the Contact Us entry, they are automatically converted to links on your page. The links are automatically encrypted using JavaScript to make it harder to harvest by spambots.
Chapter 5, Exercise 1 To set the amount of time to show a comment, go to Admin | Channel Administration | Channels. Select the FAQs weblog and click Edit Preferences. Select Comment Posting Preferences and change the Comment Expiration field to 60. Optionally, check the box to update existing comments with this setting and then click Update.
[ 294 ]
Appendix B
Chapter 5, Exercise 2 To include the author and the date of a post, update the line of code that reads
<strong>Q: <em>{faqs_question}
in both the faqs/ index and faqs/browse templates to read as follows:
<strong>Q: <em>{faqs_question} <strong>Posted by {author} on {entry_date format="%m/%d"}
More information about the different types of dates that you can display in your entries can be found at http://www.expressionengine. com/user_guide/modules/channel/variables.html#date_ variables. More information about date formatting code can be found at http://www.expressionengine.com/user_guide/ templates/date_variable_formatting.html.
Chapter 5, Exercise 3 If your installation included Agile Records, then you will already have a custom status called Featured. If you are using the blank installation, then you will need to create such a custom status. To create it, go to Admin | Channel Administration | Custom Status Groups, click Add/Edit Statuses, and then click Create a New Status on the top right. Call the new status Featured and click Submit. Before you update your snippet, you should first make at least three of the entries in your channel Featured entries. To do this, edit an entry and select the Options tab. Under Status, change the status to Featured. Next, update the snippet code to include a new parameter which says that the status must be featured in order to display. {exp:channel:entries channel="faqs" limit="3" orderby="random" dy namic="off" status="featured"}
[ 295 ]
Solutions to Exercises
Finally, you have to update the faqs/index, faqs/browse (both in the title and in the body of the page), faqs/rss and faqs/atom to display featured entries in these templates. By default, ExpressionEngine will only display entries with an open status—if you want to display entries with a different status, you have to explicitly tell ExpressionEngine to do so. Modify any {exp:channel:entries} tags in these templates to have the status="Open|Featured" parameter as in this example: {exp:channel:entries channel="{my_channel}" limit="10" paginate="bottom" status="Open|Featured"}
Chapter 6, Exercise 1 To create a new member group that can only modify templates, go to Members | Member Groups and select Create a New Member Group. Call the new member group Designers. Click on Control Panel Access and say Yes to accessing the control panel, and Yes to the design section. Under Template Editing Privileges, select which templates can be edited (business, contact, faqs, includes, individual, promotion, and site). Click Submit. Next, select Members | Register Member and create a new member in the Designers member group. Log in as the new member and verify that it works as expected. Chapter 6, Exercise 2 To create a custom member field, you go to Members | Custom Member Fields. Select Create a New Member Field. Choose a field name of existing_customer and a field label of Are you an existing customer of Ed & Eg?. Change the field type to Select List and enter two options (one on each line)—Yes and No. Leave Text Formatting set to None. Say Yes to this being a required field, No to the field being visible in public profiles, and Yes to being visible in registration pages. Click Submit. Log out of the control panel, then visit your website and click Register. You should see the new field on the registration screen.
[ 296 ]
Appendix B
Chapter 6, Exercise 3 Copy the includes/404 template code and then edit the promotion/index template (created as part of the exercises in Chapter 4, Moving a Website to ExpressionEngine). At the top of the template, add a line of code that says {if logged_in}. Underneath the {embed} line, add in another line of code that says {if:else}. Underneath this, paste in the code from includes/404. Then modify the and the to reflect that you are on the Promotions page rather than the 404 page and modify the paragraph of text to indicate that promotions are available to members who are logged in only. Finally, at the very end of the template, add a closing {/if} tag. The overall template structure will be as follows: {if logged_in} {embed="includes/.website_page" url_title="promotion"} {if:else} [Modified template code from includes/404] {/if}
Chapter 7, Exercise 1 To modify how the days of the week in the calendar are displayed, you need to edit the code in between the calendar_heading tags in the calendar/index template to read as follows: {calendar_heading}
{lang:weekday_short}
{/calendar_heading}
Another alternative is to use {lang:weekday_long}, which will output the full name
of the day (such as Friday). Chapter 7, Exercise 2
To display the next event that is coming up underneath your calendar, you need to use the {exp:channel:entries} tag with two parameters, namely, dynamic="off" and start_on="{current_time format='%Y-%m-%d %H:%i'}".
[ 297 ]
Solutions to Exercises
The dynamic="off" parameter decouples the channel entries being displayed at the URL. By default, the channel tag will look at the URL of the page you are on to determine the entries to display. So, if you were viewing May 2012 (and the URL was http://localhost/calendar/2012/05), your {exp:channel:entries} tag would also only display entries from May 2012. dynamic="off" means that the channel will display any entry from your channel, regardless of the URL. The second parameter is start_on="{current_time format='%Y-%m-%d %H:%i'}". The current_time is a system global variable for the current time on the server. The start_on parameter says that you only want to display channel entries with an entry date on or after the date you provide—in this case, the current date. This means that events in the past will not be displayed—you will only display events that are yet to happen. Read more about global variables at http://www. expressionengine.com/user_guide/templates/globals/ single_variables.html and read more about the start_on parameter at http://www.expressionengine.com/user_ guide/modules/channel/parameters.html#par_start_on
Insert the following code after the {/exp:channel:calendar} tag and immediately before the tag in the calendar/index template: Upcoming Event {exp:channel:entries channel="{my_channel}" limit="1" re quire_entry="yes" show_future_entries="yes" sort="asc" dynamic="off" start_on="{current_time format='%Y-%m-%d %H:%i'}"} {if no_results}
No Upcoming Events
{/if}
<strong>{title} <em>{entry_date for mat="%F %j%S %Y"} at {entry_date format="%g:%i%a"}
{if events_description}
{events_description}
{/if} {if events_sponsor} {related_entries id="events_sponsor"} More About Our Sponsor: {title} {if event_sponsors_about}
Chapter 8, Exercise 1 Limiting the number of photos and randomizing them simply requires adding parameters to the {exp:channel:entries} tag in the photos/index template. This also limits the number of photos that will display in each category, so you want to be sure not to add more photos in a given category than the limit you set here. Alternatively, you can use pagination so that if there are more photos than the limit, they display on separate pages. {exp:channel:entries channel="{my_channel}" or derby="random" limit="10"}
Chapter 8, Exercise 2 To track the number of single-entry page views, you must first add a parameter to the {exp:channel:entries} tag in your single-entry page template (photos/ comment). ExpressionEngine offers four view counters that can be added to different single-entry pages, helpfully numbered one through four. Since you only have one single-entry page, you can use view counter one. {exp:channel:entries channel="{my_channel}" limit="1" require_entry="yes" status="Open|Premium" track_views="one"}
Next, add a conditional statement to your multiple-entry page (photos/index), immediately after the code that displays how many comments there are and before the : {if view_count_one>="10"}***Popular***{/if}
The second helps keep the photo thumbnails aligned, when some are considered popular and some are not.
Note that the view counter is not incremented when a photo is viewed in the lightbox because the lightbox is displaying the actual image file and not the single-entry template.
[ 299 ]
Solutions to Exercises
For channel entry view tracking to work, it must be enabled in Admin | Security and Privacy | Tracking Preferences (by default, it is enabled). The single-entry template in question must also not have caching enabled (by default, caching is disabled). To change the caching preferences of a template, select Preferences from either the Template Manager or the Edit Template screens. For more information on entry view tracking, please see http://www.expressionengine.com/ user_guide/modules/channel/entry_tracking.html.
Chapter 8, Exercise 3 When extracting code that is repeated, you must decide on the best tool to use. In this case, since you use this repeated code in more than one template, Preload Text Replacements are automatically ruled out (since they can only be used in the template in which they are defined). Global variables are also not an option here because the code contains ExpressionEngine tags such as {exp:comment:form}. The choice, therefore, comes down to Snippets or Embedded Templates. Snippets are preferable if the code is identical, regardless of which template might be using it. Embedded Templates are useful if you need to pass in variables to account for small variances in the code. In this case, the {exp:comment:form} requires you to define the preview template. Since this is different for the FAQs channel versus the Photos channel, you will need to use an Embedded Template and pass in the preview template information as a variable. First, create a template called .comment in the includes template group. The preceding dot means that the template is hidden and cannot be accessed directly. The template type should be Web Page. In the .comment template, copy in all the code from photos/comment from Comments all the way down to {/exp:comment:form}. Change the {exp:comment:form} line to read {my_template_group} and {my_single_entry_ template} as embedded variables rather than Preload Text Replacements: {exp:comment:form pre view="{embed:my_template_group}/{embed:my_single_entry_template}"}
Click Submit to save the new template. Now edit faqs/browse and photos/ comment and replace all the code from Comments all the way down to {/ exp:comment:form} with the following: {embed="includes/.comment" my_template_group="{my_template_group}" my_single_entry_template="{my_single_entry_template}"}
[ 300 ]
Appendix B
Both the faq/browse and photos/comment templates have Preload Text Replacements for {my_template_group} and {my_single_entry_template}. This line simply passes these text replacements to the embedded template. In this way, even though both the Photos and FAQs channel are using the same chunk of code to display comments, if a member chooses to preview their comment, they are redirected to the appropriate template based on the channel. Visit both the FAQs and Photo sections of your website, and you should see no difference in the functionality of viewing, previewing, and posting comments. The only difference is that now your single entry templates contain a lot less code and if you ever want to change the comment form, you can do so in one template, instead of having to go through multiple templates. Reducing repetition in this way is a powerful feature of ExpressionEngine, and it makes websites easier to maintain.
[ 301 ]
Index Symbols 404 Page improving 140 404 Page not found 98 {exp:search:advanced_form} tag 235 .htaccess files allowing, to be used 291, 292 {site_url} variable 87
plugins 274, 275 resources, URL 271 search results module 279 Solspace 276 template variables accessory 278 third-party add-ons 275 types 271 advanced search form, Search module 235, 236 Agile Records website 37 Atom feed about 136 and RSS feed, differences 139 creating 139 setting up 136-139
B backup module 278 backups, ExpressionEngine 263-265 banned member group 155 Blacklist/Whitelist module 259 blank calendar template creating 179 Body field 46 build release 267
M Mailing List module about 236 e-mails, sending 239, 240 mailing list, setting up 236, 237 member registration, allowing 238, 239 Make the index template in this group your site's home page? box 53 MAMP 285 Matrix 275 MD Detect Page Type URL 141 MD Detect Page Type plugin 278 member groups about 154 banned member group 155 Channel Assignment 159 Channel Posting Privileges 159 Comment Administration 159 configuring, options 155, 156 control panel access 158 Control Panel Email Privileges 159 creating, solution 296 custom member field, solution 296 editor member group, creating 155 guests member group 155 members member group 154 Module Access Privileges 159 new member group, creating 159 pending member group 154 site access 156 Template Editing Privileges 159 member-only content content, making visible to members 167-170 creating 166, 167 members creating 160 Editor Ed, logging in as 160-162 list 151, 152 member groups 154 member-only content, creating 166
new member, registering as 147-149 profile 149-151 templates, linking to 152-154 types 143, 144 with administrative control panel access 144 without administrative control panel access 144 membership designing 143 member groups 144, 154 member, list 151, 152 member, profile 149,-151 member templates, linking to 152-154 new member, registering as 147-149 preferences 144-147 members member group 154 menu, snippets creating 95, 96 Moblog e-mail, Moblog module sending 253, 254 Moblog module about 248 Moblog e-mail, sending 253, 254 setting up 248-252 template, setting up 252, 253 modules about 272 multiple-entry page content, adding 215-221 creating 213, 214 Multiple Site Manager 260
NSM Live Look, Newism (Leevi Graham 277 NSM TinyMCE, Newism (Leevi Graham) 277 NSM Transplant, Newism (Leevi Graham) 277
O official installation guide URL 19
P page load times reducing, techniques 282 pages adding 84, 85 creating, solution 294 second page, publishing 86, 87 second template, creating 88-90 Pages module URL 85 pending member group 154 photo gallery add-ons 223 advanced features 221 channel, creating 203 design, changing 209, 210 designing 199, 200 installing 203 photo gallerysolution 299 setting up 205 photo gallery, add-ons channel images 224 image sizer 223 photo gallery channel categories, creating 205, 206 creating 203, 207 custom fields, creating 203-205 photos, uploading 207-209 photos direct upload 208 uploading, to website 207 phpMyAdmin 21, 290 Pixel & Tonic about 275 Matrix 275 Playa field type 275
Wygwam 275 URL 200 Playa field type 275 plugins 274, 275 Pluralism 62 preload text replacements 91, 92 Publish page layout modifying 162-164 options, configuring 165
Q Query module 260 question set publishing 112, 113 Quick Links Manager, control panel 42
R Referrer module 260 repetition preload text replacements 91, 92 reducing, ways 90, 91 user-defined global variables 92, 93 resources ExpressionEngine documentation, URL 15 URL 17 restores, ExpressionEngine build release 267 database restores 266 releases, types 267 version release 267 RSS feed about 136 and Atom feed, differences 139 setting up 136-139
S search box Search module adding, to site 230 search box, Search module adding, to site 229 Search module advanced search 235 no-results template 234, 235 search results template, creating 231-233 search results module 279 [ 308 ]
setting up 252, 253 templates, ExpressionEngine about 10, 50 Access section 54 as files 99-101 content displaying, tags used 55-58 content, adding to multiple-entry page 215-221 creating 78-82, 290 Duplicate an Existing Template Group option 53 editing 54 group, creating 53, 54 index template 52, 55 Make the index template in this group your site's home page? box 53 multiple-entry page, creating 213, 214 pointing, to channel 82, 83 Preferences section 54 second template, creating 88 single-entry page, creating 210-213 tag 56 tag pair 57 Template Notes section 54 URL, relationship 52 URLs, relating to 51, 52 template variables accessory 278 themes, control panel corporate theme 44 Default Control Panel Theme 43 downloading 42 fruit theme 44 mobile theme 43 switching 43
T tab manager, control panel Template Manager screen 40, 41 Tag module, Solspace 276 tag pair 57 tags about 10, 56 used, to display content in templates 55-58 tell-a-friend form, Email module creating 244 tell-a-friend template, Email module creating 244-247 template, Moblog module
U upgrading, ExpressionEngine steps 268-71 URL title 46 user-defined global variables 92, 93 user-friendly URLs, ExpressionEngine creating 31 index.php, hiding 32, 33 index.php, renaming 34, 35 User module, Solspace 276
[ 309 ]
V version release 267 View Entry page 50 visitors allowing, to preview comments 128, 129
W WampServer about 285 downloading 286, 287 home page, URL 290 installing 288, 289 Localhost 290 package 286 using 289 welcome page, deleting 290 www directory 290 WampServer, package AMP environment 286 phpMyAdmin 286 website converting into ExpressionEngine, approaches 62, 63 wiki module about 255 wiki, setting up 255, 256 wiki, working 257-259 Write Mode 47 Wygwam 275
X XAMPP 285
[ 310 ]
Thank you for buying Building Websites with ExpressionEngine 2
About Packt Publishing
Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective MySQL Management" in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions. Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks. Our solution based books give you the knowledge and power to customize the software and technologies you're using to get the job done. Packt books are more specific and less general than the IT books you have seen in the past. Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't. Packt is a modern, yet unique publishing company, which focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike. For more information, please visit our website: www.packtpub.com.
Writing for Packt
We welcome all inquiries from people who are interested in authoring. Book proposals should be sent to [email protected]. If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us; one of our commissioning editors will get in touch with you. We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise.
CodeIgniter 1.7 Professional Development ISBN: 978-1-849510-90-5
Paperback: 300 pages
Become a CodeIgniter expert with professional tools, techniques and extended libraries 1.
Learn expert CodeIgniter techniques and move beyond the realms of the User Guide
2.
Create mini-applications that teach you a technique and allow you to easily build extras on top of them
3.
Create CodeIgniter Libraries to minimize code bloat and allow for easy transitions across multiple projects
CodeIgniter 1.7 ISBN: 978-1-847199-48-5
Paperback: 300 pages
Improve your PHP coding productivity with the free compact open-source MVC CodeIgniter framework! 1.
Clear, structured tutorial on working with CodeIgniter for rapid PHP application development
2.
Careful explanation of the basic concepts of CodeIgniter and its MVC architecture
3.
Use CodeIgniter with databases, HTML forms, files, images, sessions, and email
4.
Full of ideas and examples with instructions making it ideal for beginners to CodeIgniter
Please check www.PacktPub.com for information on our titles
Maintain, add to, and edit content of your Drupal site with ease 1.
Keep your Drupal site up to date: easily edit, add to, and maintain your site's content, even if you've never used Drupal before!
2.
Covers the full range of content that you might want on your site: richly formatted text, images, videos, as well as blog posts, calendar events, and more
3.
Get to grips with managing users, slaying spam, and other activities that will help you maintain a content-rich site
4.
Concise, targeted information with easy-tofollow hands-on examples
Please check www.PacktPub.com for information on our titles
![Building Websites with Joomla 1.5 [PHP CMS]](https://epdf.pub/img/300x300/building-websites-with-joomla-15-php-cms_5a3d79ccb7d7bcc77cbd0cdf.jpg)
