Wrkshop - Intro to Craft

Transcript

1. Introduction to Craft CMS WRKSHOP April 11, 2015
2. WRKSHOP INTRO TO CRAFT CMS Getting started 1. Introduction and welcome 2. Craft overview 3. Download and install 4. Admin panel walkthrough 5. Managing content in Craft (assets, users and entries) 
 6. Craft folder structure 7. Twig templating 8. How does routing work?
 
 9. Craft Plugin Basics BREAK TIME BONUS (IF TIME PERMITS)
3. 1) Intro and welcome i Craft Hi, I’m Adam
4. 1) Intro and welcome Taecho Group taechogroup.com craftpl.us Craft Plus + Super secret Craft project I can’t talk about yet!
5. 2) Craft Overview What is Craft? Craft is a licensed content management system (CMS) from Pixel and Tonic. Craft is a content management system (CMS) that’s laser-focused on doing one thing really, really well: managing content. And since content comes in all shapes and sizes, we’ve built Craft to be as flexible as possible, without compromising on the ease of use for content authors. [ It will change your life ]
6. 2) Craft Overview No really, What is Craft? 1. A PHP based, content management system 2. Licensed and extendable but not open source 3. Built on Yii (Fun party fact) • Yii is a high-performance PHP framework 4. No “Themes” 5. Templates use Twig 6. One click updates (with database backups) 7. 18 custom field types 8. Content version-ing 9. User roles and permissions 10. Assets 11. Always improving • 186 updates to date
7. 2) Craft Overview Wordpress Craft vs. Caveat: There is nothing wrong with using Wordpress Craft is your swiss army knife.
 The right tool for the every project Wordpress is the “as seen on tv” knife kit.
 Who needs 29 knives when just 1 will do? Or platform of your choice
8. 2) Craft Overview CMS BREAKDOWN Cost Support Templates Plugins Craft Free / $199 / $299 Included None - Twig Yes (250+) Expression Engine $299 Paid - $49+ month Sort of - EE Yes Wordpress Free - Open Source None Yes (inline php) Yes Drupal Free - Open Source None Yes (inline php) Yes Joomla Free - Open Source None Yes (inline php) Yes
9. 3) Download and install HELLO WORLD Detailed install process at buildwithcraft.com/docs/installing
10. 3) Download and install MINIMUM REQUIREMENTS Full requirements at buildwithcraft.com/docs/requirements • PHP 5.3.0 or later with safe mode disabled • MySQL 5.1.0 or later, with the InnoDB storage engine installed • A web server (Apache, Nginx, IIS) • A minimum of 32MB of memory allocated to PHP • A minimum of 20MB of free disk space • A minimum of 1MB of database space Craft requires the following:
11. 3) Download and install HOSTING SUGGESTIONS Digital Ocean Linode forge.laravel.com Regardless of your hosting choices you need the ability to set your domain root to the Craft /public folder
12. 3) Download and install SETUP WALKTHROUGH Download Craft from buildwithcraft.com STEP 1 Unzip and move to your root folder STEP 2 Rename htaccess to .htaccess in /public STEP 3 Setup a new database using your db program of choice STEP 4 Edit /craft/config/db to match your db settings STEP 5 Visit craft.dev/admin and follow the install process STEP 6
13. 4) Admin panel walkthrough PUT THINGS INTO BUCKETS Language that is unique to Craft Dashboard uses widgets Entries manages your content Settings organize fields and sections
14. 4) Admin panel walkthrough PUT THINGS INTO BUCKETS - PART 2 Language that is unique to Craft Users keep your peeps in order Plugins are displayed in the top nav (or not) Assets keep up with media
15. 4) Admin panel walkthrough TAILOR YOUR CONTENT ADMIN DEMO
16. 4) Admin panel walkthrough TAILOR YOUR CONTENT Planning is key to happy content and happy clients Fields Sections Entries Templates Construct Organize Output Create
17. 4) Admin panel walkthrough TAILOR YOUR CONTENT - FIELDS Fields Sections Entries Templates Construct Organize Output Create Out of the box Craft provides 18 different field types. Assets Categories Checkboxes Color Date/Time Dropdown Entries Lightswitch Matrix Multi-select Number Plain Text Position Select Radio Buttons Rich Text Table Tags Users
18. 4) Admin panel walkthrough TAILOR YOUR CONTENT - SECTIONS Fields Sections Entries Templates Construct Organize Output Create Think of sections as empty buckets to organize your content: blog, news, team Singles, channels and structures, oh my! Entries are categorized into 3 different categories: Single pages, channels and structures.
19. 4) Admin panel walkthrough TAILOR YOUR CONTENT - SECTIONS Fields Sections Entries Templates Construct Organize Output Create SINGLE Single pages are usually unique, one off pages like your homepage, about page and contact page CHANNEL Channels are recurring content pages like a blog, news feed, a team page etc. STRUCTURE Structures are content pages that usually need to be given hierarchy and order like sub-nav pages.
20. 4) Admin panel walkthrough TAILOR YOUR CONTENT - ENTRIES Fields Sections Entries Templates Construct Organize Output Create Entries use the fields you’ve built, are organized into sections and store your content. Entries can be previewed and revisions are saved.
21. 4) Admin panel walkthrough TAILOR YOUR CONTENT - TEMPLATES Fields Sections Entries Templates Construct Organize Output Create Templates allow you to output your entries for the world to see. The amazing thing about craft is there is no set structure you are required to follow. 
 
 Content can go anywhere. <h2>Recent News</h2> <ul> {% for entry in craft.entries.section('news').limit(5).find() %} <li><a href="{{ entry.url }}">{{ entry.title }}</a></li> {% endfor %} </ul>
22. 5) Managing content - users KEEPING YOUR USERS IN LINE Learn more about user permissions: buildwithcraft.com/docs/users 1. Users can be invited through the admin panel 2. Troubled user? Ban them! 3. Limit admin access through built in permissions • Access can be limited to entries, users and assets 4. Users can be extended through custom fields • Create additional fields like details, location and address 5. Users can be placed into user groups • User groups have predefined access level
23. 5) Managing content - assets ORGANIZE PHOTOS AND FILES Learn more about user assets: buildwithcraft.com/docs/assets 1. Craft allows Assets can be store locally and in multiple locations 2. If your using Craft Pro you can save files to Amazon S3, Rackspace Cloud Files, and Google Cloud Storage 3. Files can be organized through multiple sub-folders 4. You can also create Image transformations so you always have the right size image
24. 5) Managing content - entries ORGANIZE PHOTOS AND FILES Learn more about user assets: buildwithcraft.com/docs/assets 1. Entries can be enabled or disabled at will • Disabled entries will redirect to your 404 page 2. Entries can be schedule to be published or expired at specific dates 3. Entries save revisions so you can roll back to older versions if you need to. 4. Sections can contain multiple entry types each with their own field layouts
25. BREAK TIME
26. 6) Craft folder structure A HOUSE DIVIDED Two sides to the coin with Craft /craft /public App - Config - Plugins - Storage - Templates Index.php - Assets - Javascript - CSS - Images hidden for protection publicly accessible content
27. 6) Craft folder structure Part 2 A HOUSE DIVIDED Two sides to the coin with Craft Aside from the index.php file (which helps run Craft) all of your public files go here. Anything that your templates might need to utilize: images, css, javascript etc. should be placed here. Feel free to organize these files how you prefer - it won’t effect the templates. /craft/public
28. 6) Craft folder structure Part 2 A HOUSE DIVIDED Two sides to the coin with Craft This is your Craft “core”. No reason to go hunting here. /craft/app Edit your database settings, config settings and routes /craft/config All of your plugins are stored here and are self contained /craft/plugins Error logs, craft cache files and temporary files live here /craft/storage Home sweet home. This is where you will live. /craft/templates
29. 6) Craft folder structure Wait what? No themes? Unlike wordpress, Craft uses templates not themes.
30. 7) Twig templating - layouts TEMPLATES AND TWIG Craft uses a template engine called twig [ and it rocks ] Read more about twig at twig.sensiolabs.org/ TWIG <?php echo $var ?> {{ var }} <?php $arr = array(1, 2, 3, 4); foreach ($arr as &$value) { $value = $value * 2; } ?> {% for user in users %} {{ user.name }} {% else %} No users have been found. {% endfor %} PHP Output Tags Logic Tags {{ entry.title }} or
31. 7) Twig templating - layouts {% INCLUDE %} Using include allows you output additional html files like footers and sidebars {% EXTENDS %} Extends allow you to create partial html templates so you don’t have to repeat yourself over and over again. {% EMBED %} Embeds work similar to includes but allow you to update content of additional “blocks” so you can build dynamic templates. TEMPLATES AND TWIG Craft uses a template engine called twig {% include “_footer" %} {% extends "_layout" %} {% embed “_custom_embed” %}
32. 7) Twig templating - layouts A LOOK AT TEMPLATES The difference between layouts and embeds A basic page layout
33. 7) Twig templating - layouts A LOOK AT TEMPLATES The difference between layouts and embeds An embed page layout - 1st variation An embed page layout - 2nd variation
34. 7) Twig templating - layouts Part 2 A LOOK AT TEMPLATES Templates not themes index.html Extends _layout.html
35. 7) Twig templating - layouts {% extends "_layout" %} {% block content %} <h1>{{ entry.heading }}</h1> {{ entry.body }} <h2>Recent News</h2> <ul> {% for entry in craft.entries.section('news').limit(5).find() %} <li><a href="{{ entry.url }}">{{ entry.title }}</a></li> {% endfor %} </ul> {% endblock %} A LOOK AT TEMPLATES A look at /templates/index.html
36. 7) Twig templating - layouts <!DOCTYPE html> <head> <body> {% block content %} <p>If you see me, you haven’t set your content block yet.</p> {% endblock %} </body> </html> A LOOK AT TEMPLATES A look at /templates/_layout.html
37. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html
38. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html craft.entries.section('news').limit(10) “craft” is a global instance used to access anything within craft
39. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html craft.entries.section('news').limit(10) “entries” are technically a function but I like to think of it as a class You’ll also see craft.assets, craft.pluginName, craft.tags, craft.users
40. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html craft.entries.section('news').limit(10) “section” is part of the ElementCriteriaModel “news” is the handle that was generated based on your section name
41. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html craft.entries.section('news').limit(10) “limit” is a parameter that determines which entries to return
42. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html entry “entry” is what you choose to name the information your selecting This could easily be named content, media, or flubub - your choice.
43. 7) Twig templating - entries {% for entry in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> {{ entry.summary }} <a href="{{ entry.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html entry “entry” is what you choose to name the information your selecting This could easily be named content, media, or flubub - your choice.
44. 7) Twig templating - entries {% for content in craft.entries.section('news').limit(10) %} <article> <h1><a href="{{ content.url }}">{{ content.title }}</a></h1> {{ content.summary }} <a href="{{ content.url }}">Continue reading</a> </article> {% endfor %} WORKING WITH ENTRIES An example of this can be found in /templates/index.html content This is how it would changed if you used something other than entry Each of the following handles are generated off of your field names.
45. 8) URL Routing HOW DOES CRAFT ROUTE REQUESTS? Full routing details can be found at buildwithcraft.com/docs/routing URL Search Entries Custom Route HTML files Matching Template Matching Template Matching Template or 404 page or 404 page or 404 page
46. 8) URL Routing HOW DOES CRAFT ROUTE REQUESTS? Full routing details can be found at buildwithcraft.com/docs/routing 1) IS IT OWNED BY CRAFT? Craft only intercepts requests that go to your index.php file. Images, CSS and other public files can always be accessed. 2) IS IT A RESOURCE REQUEST? Cpresources including files that power craft (user images, admin css etc.) are intercepted by Craft. 3) IS IT AN ACTION REQUEST? Actions (form submissions, controller actions etc.) always take priority when a URL is accessed. IF NONE OF THESE APPLY CRAFT RENDERS A 404 ERROR 4) IS IT AN ENTRY/CATEGORY REQUEST? Craft checks your entries and categories for matching URLs and determines the best action to do next. 5) DOES THE URI MATCH ANY DYNAMIC ROUTES? Dynamic routes set in your admin panel (or config file) will override your template setup. 6) DOES THE URI MATCH A TEMPLATE? Finally Craft looks at your html files in your template folder to see if it matches to requested URL.
47. BUT WAIT. THERE’S MORE
48. 9) Plugin basics GETTING STARTED WITH CRAFT PLUGINS Plugin requirements can be found here: buildwithcraft.com/docs/plugins/introduction
49. 9) Plugin basics PLUGIN OVERVIEW Plugin requirements can be found here: buildwithcraft.com/docs/plugins/introduction 1. Plugins must have unique names (folder names and handles) 2. Plugins must have a primary Plugin Class 3. Plugins can run functions on init() or after events happen in Craft 4. Plugins can be used to embed custom variables like {{ craft.pluginName.variable }} 5. Plugins utilize their own templates to build out custom areas in the Craft Admin area
50. 9) Plugin basics A PRIMARY 
 PLUGIN CLASS <?php namespace Craft; class SamplePlugin extends BasePlugin { function getName() { return Craft::t(‘Sample Plugin'); } function getVersion() { return '1.0'; } function getDeveloper() { return 'Wrkshop'; } function getDeveloperUrl() { return ‘http://wrkshop.com'; } } This file is required to list and install a plugin
51. 9) Plugin basics OUTPUTTING A SIMPLE VARIABLE <?php namespace Craft; /** * Sample Variable */ class SampleVariable { /** * Output Hello World {{ craft.sample.hello }} */ public function hello() { return 'Hello world!'; } } This allows you to use variables like {{ craft.sample.hello }}
52. buildwithcraft.com straightupcraft.com STRAIGHT UP CRAFT craftpl.us craftcms.stackexchange.com STACK EXCHANGE LEARN MORE A look at the current craft ecosystem Official Docs Commercial plugins & screencasts Plugins and tutorials Ask Questions CRAFT PLUS BUILD WITH CRAFT http://buildwithcraft.com/community Request an invite SLACK CHANNEL Using include allows you output additional html files like footers and sidebars
53. Thanks! @adammccombs taechogroup.com / craftpl.us