Intro to ExpressionEngine and CodeIgniter
- 1. ExpressionEngine An Awesome CMS for Designers and Developers Presentation by: James Buckley Twitter: @jamesbuckley Web: brightrocketdesign.com Email: jame@brightrocketdesign.com
- 2. Who Are You? • Web and Graphic Designer for 10+ Years • Mostly Front-End HTML / CSS / Photoshop / Wireframes / Project Management NOT a Programmer
- 3. The Basics Content Management System (CMS) – Let Clients (Or You) maintain a Website Easily • Articles / Blog Posts • Add pages / sections of content • Contact Info, Products, etc – Save time: the bigger the site, the more time. – Let you do more interesting, better paying work
- 4. A Brief Introduction • Created By Ellis Labs (10 years of Awesome) – pMachine Pro (Aimed at Bloggers originally) – ExpressionEngine (First Real CMS) – ExpressionEngine 2 (Major Overhaul in CodeIgniter) • Specs – PHP – MySQL – CodeIgniter Framework (Open Source) – Commercial (Not Free but that’s GOOD)
- 5. Who’s EE For? • Great for Web Designers who don’t know PHP • Great for Programmers who don’t want to write a CMS from scratch • Used by: Apple, Disney, Nike, MTV, Adobe, BBC, B MI, A List APart,
- 6. Types of Sites Using EE • Simple 5-10 Page Sites • News Sites & Blogs w/1000s of Entries • Government & Political Sites • Arts and Photography • Medical & Not-For-Profits • Pretty Much Anything • LOTS of Examples at show-ee.com
- 13. Great for Web Designers • Made with Designers in Mind • Simple HTML-Like Tag Syntax • Logical Template / URL Structure • No touching PHP (Unless you want to) • Tons of Commercial and Free Addons that expand capabilities, check devot-ee.com
- 14. Great for Web Designers • Guaranteed support built into cost – Wordpress VIP Support is $3,750 • Designer / Noob friendly product and community • Solid Documentation w/Comments • Original design valued greater than themes by developer • Easy to keep design standards compliant • CMS fits design, not other way around
- 15. Great for Developers • Self-Hosted • Not “Blog” software. • Fantastic Security Record – 10 yrs, no large scale exploits – Only 3-4 High Priority Security Patches in product life • Written on the Open Source PHP Framework CodeIgniter PHP Creator Rasmus Lerdof likes it: “because it is faster, lighter and the least like a framework.” • PHP Code is NOT obfuscated (You can mess with core files)
- 16. Great for Developers • Guaranteed Developer time to fix bugs ( vs adding “Cool” but useless features) • Best, proven developer customers contribute to Core (Reactor Program) • Addons – Simple to complex options – CodeIgniter based
- 17. Types of Addons • Plugins: No User Interface, custom EE tags • Fieldtypes: Adds custom fieldtypes to data entry forms • Extensions: Used to modify the EE “core” without breaking it. Modifies control panel • Accessories: Database tables, tabs • Modules: Database tables, custom control panel, tabs, fields and EE tags
- 18. Things I’ve Built Simple and Complex Web Forms Contact Forms, order forms Class Registration Systems Size Limit, Email alerts on Signup, Exportable class list in CSV, 700+ signups Publication Databases 800+ Files, categories, fully searchable and filterable News & Blogs RSS feeds, Commenting, Gravitar Integration Image Galleries / Sliders Jquery / XML / Flash Based Email Newsletter Systems Pulls from news channel, integrates video, plain txt version
- 19. The EE Approach • “Channels” of data not “Pages” – 1 Page can have many “Channels” of content • Custom Fieldtypes & Forms – Rich Text Editors (lots of choice) – Google Maps – Address, Currency, File, Image – Dozens and dozens more
- 20. Assets
- 21. Better Pages
- 22. Pointee and Customized Version
- 23. Expresso
- 24. Playa and Assets
- 25. NSM Twitter & morePreview
- 26. Content Elements
- 27. The EE Approach Most Basic Functionality Built In • Comments • Categories • Mailing List • Membership Management • User Profiles • Mobile Blogging • Simple Ecommerce • Forums (add. Cost)
- 28. Channel Structure • Channel Each TYPE of content gets a dedicated Channel –Entries (Unlimited) • Fields (Unlimited / Many Types) • Categories (Unlimited / Nested / Multiple) • Status (Open or Close / Custom )
- 29. Example Channel Structure Job Posting (Channel) • Job title (TXT field) • Job Description (Rich Text Editor) • Job Category (Native Categories) • Company Logo (File Field) • Website Link (Txt field)
- 30. Code Examples – Parameters & Variables Basic Channel Entry Tag {exp:channel:entries channel=“chan_news" limit="1"} <h2>{title}</h2> {body} {/exp:channel:entries} Produces <h2>My Article Title</h2 <p>My article body, pretty simple eh?</p>
- 31. Complex Channel Entry Tag {exp:channel:entries channel="news|blog" limit=“2" category="2" orderby="entry_date" sort= "desc" disable="member_date|pagination" dynamic="no" } <h2>{title}</h2> <span class="Permalink"> <a href="{permalink="news/archives“}"> {entry_date format="%m / %d / %Y"} </a> </span> <div class=“article”> {body} </div> {/exp:channel:entries}
- 32. Complex Channel Entry Tag - Results <h2>News Article 3</h2> <span class=“Permalink”> <a href=“domain.com/news/archive/news_article_3”> 10 / 5 / 2012 </a> </span> <div class=“article”> <p>News body content goes here </p> </div> <h2>Blog Article 1</h2> <span class=“Permalink”> <a href=“domain.com/news/archive/news_article_3”> 10 / 4 / 2012 </a> </span> <div class=“article”> <p>Blog body content goes here</p> </div>
- 33. Addon Example – Solspace Freeform {exp:freeform:form collection="ContactForm" required="name|email|phone1|note" return="contact/thanks” notify="james@brightrocketdesign.com" template="default_template" } <h2>Send me a quick note!</h2> <label for="f-name">Name</label> <input type="text" name="name" id="f-name" /></p> <label for="f-email">Your Email</label> <input type="text" name="email" id="f-email" /></p> <label for="f-comments">Tell me a bit about this project</label> <textarea name="note" id="note" rows="5" cols="40"></textarea> <button type="submit" class="button-a">Launch!</button> {/exp:freeform:form}
- 34. The Community Rocks • Active User Forums (Ellis Staff and volunteers) • Twitter community #eecms (Great for Support & Finding Talent) • Good size but not overwhelming thousands of devs and sites, but we all “know” each other • More Professionals Lots of Pros - Not so many Hobbyist, Creepy SEO guys (Not You) = Higher Skill and Professional Level of Average User
- 35. The Cost of Awesome • Professional Support • Don’t struggle with design/CMS integration unlike many OS CMS systems • Saves me Time, Time = Money • Allows me to build sites that “Do Stuff” • Pays for itself a dozen times over Support the tools that make you Money You cheap so-and-so ;)
- 36. The Cost of Awesome • Commercial - $299.95 • Non-Commercial - $149.95 • Freelancer - $99.95 • Always budget $ for additional Addons – Simple addons often FREE – Generally inexpensive $10-$50 – Ecommerce, more complex addons around $100 -$150
- 37. Demo Time!
- 38. Things I Wrote about EE • The ExpressionEngine Designers Website Checklist • A Comparison of WYSIWYG Editors for ExpressionEngine at EE Insider • Using Pages and Low-Reorder for Flexible Navigation and Site Structure • Switching to Sublime 2 for Expression Engine Development brightrocketdesign.com/blog/category/expressionengine
- 40. Free Stuff Time! • ExpressionEngine Freelancer Licenses (2) Ellis Labs (ellislab.com) • Low Variables (2) GoToLow (gotolow.com) • Content Elements (2) Krea (krea.com) • Expresso (2) Put Your Lights On (putyourlightson.net)
- 41. Free Stuff Time! Securing EE2 by Mark Huot (EVERYONE!) by Mark Huot, provided by Mijingo (Mijingo.com)
- 42. Similar Presentations Lea Alcantara LeaLea.net slideshare.net/lealea/edmontonee- main-presentation-10242009 (Special Thanks!) Emily Lewis emilylewisdesign.com www.slideshare.net/emilylewis/designe rfriendly-ee
- 43. Resources EEInsider News, Articles, Reviews Devote:ee Addon Directory EEPodcast Podcast about EE and Web Design Director-EE Director of EE Designer/Devs @Twitter #eecms @EllisLab #frup EE Hub Aggregator of EE Info
- 44. Questions?
- 45. CodeIgniter with Brett Silver