Ready. Set. Drupal! An Intro to Drupal 8, Part 1

http://training.acquia.com

Ready. Set. Drupal!

A quick introduction to the Drupal 8 out-of-the-box site building experience.

http://training.acquia.com/drupalready

IntroductionWhat’s this all about?

About me• Heather James• Manager of Learning

Services• @learningdrupal

training.acquia.com/events

Join me for Part 2!

acquia.com/resources/webinars

Fun is memorable

About you!• What other

systems have you used?

• What do you know about Drupal already?

What’s in your toolbox?

What we’ll build…

training.acquia.com/drupalready

Step-by-step

http://training.acquia.com/drupalready

• Presentations

• Demos• Activities –

try it yourself!

Ready check!You will need

• A working copy of Drupal 8 – most recent Beta.

• Acquia Cloud free siteacquia.com/drupal-8

• Materials!

Nice to have

• Browser inspection tool such as Firebug for Firefox, or “Developer mode” in Chrome.

• Lorem Ipsum text generator.

http://training.acquia.com/drupalready

Task: Drupal 8 – Acquia Cloud• Go to

acquia.com/drupal-8

• Choose to try now.

• Configure your site

acquia.com/drupal-8

Bonus: Local copy

• Install Dev Desktop 2

• Connect locally, securely.

docs.acquia.com/dev-desktop2/install

Lesson 1: What is Drupal?Who is using it, and how.

In Lesson 1• Presentation: Who’s using Drupal?

What kinds of sites are built in Drupal?

• Demo: Orientation around Drupal, and using the tasks and lessons.

• Task: Make sure your site is set up!

“Webmasters” saved by scripting languages

In comes Drupal!• Founded by Dries Buytaert in

his college dorm, circa 2001.• CMS: Content management

system• Popular: 1 out of every 50

websites• Flexible: From programmable

API to UI tools for modeling data and display

• OSS: Open source software (GPL v 2+)

Photo by Kathleen Murtagh Dries' State of Drupal keynote (CC BY 2.0)

Many great examples

Economist.com, Dev.twitter.com, Whitehouse.gov, The King Center

Assembling pages in DrupalWe’ll look at the individual components that make up a specific page in Drupal

drupal.com/showcases

Content managementMobile friendly administration and responsive themes out of the box

drupal.com/get-started-with-drupal

Content management• Inline editing• Image

management• Flexible and fully

configurable admin.

• Role-based permissions.

Demo: Admin Orientation

Tasks available at: training.acquia.com/drupalready

• Click > paths > start from Admin menu.

• Menu can be docked top or side.

• “Back to site” to see changes.

Task: Get into your site

• Everyone has their site installed?

• If so, try changing your site title.

Lesson 2: Drupal 8 StatusWarning: Under construction!

In Lesson 2• Presentation: Drupal 8 Status Report• Demo: How to find out where Drupal

is in development cycle. • Task: Sign up to Drupal.org.

You are here: API Completion phase

drupal.org/core/release-cycle

What’s next?• More beta

releases!• Release candidate:

Drupal 8.0.0• Future minor

releases will add features: Such as Drupal 8.1.0

Betas Test

RC1 Test

8.0 Ready!

Minor New features

drupal.org/node/2135189

What’s the latest release?

drupal.org/node/3060/release

Task: Get your “d.o” account• Go to Drupal.org• Create an

account• Login!

http://drupal.org

Lesson 3: Thinking like DrupalAssembling pages

In Lesson 3 • Presentation: The page model. • Demo: Create content, add a page,

place in the main menu. • Task: Follow the steps in the demo to

add a page to your site.

Limited by a mental model

“Pages” in physical “folders”

Other CMSs?

This example is Typo3, what is your previous CMS like?

Page added “into” site structure

Drupal holds data

Structured data: referred to as “Content entity” types in D8.

Articles

Users

Basic pages Comments

““

Terms

Blocks

Generated lists of contentdrupal.com/showcases

Shows examples of pages created from lists of content on the fly.

FYI: Built in Drupal 8!

Demo: Add a page

• Add a Basic page.

• Add link to menu.

• Manage menu.

Task: Add a basic page• Add a “Basic page”.• Link from the “Main

menu.”• Challenge: Manage

menu or Add an article.

Review• Adding content• Menu management

decoupled from adding content

Next: Assembling your site in Drupal

Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0)by JuditKhttp://www.flickr.com/photos/juditk/5879492679/

Lesson 4: The Drupal Magic Trick

In Lesson 4• Presentation: Fields and modeling

data• Demo: Customize a content type,

create content, create a view.• Task: Follow the steps in the demo to

customize a content type.

Structured data: Fields

Compare: Which allows for better input and display control?

In HTML:

Body textTagsLocationMedia (video, images)

Title

Image upload

Title

Location

Tags

Body text

Content types and fields

Content types: Define defaults and add fields (usually)

Generic Content type settings

TitleAuthor

Date publishedComments

Menu optionsRevisions

Article + fields:

ImageBody text

Tags

Tips + fields:

VideoBody text

Tags

Link

Consider your design• Limit your fields to only what you

need to reuse and display.

3 example display options

View modes

Flexibility for different conditions

With Drupal, you can reuse content intelligently.

Demo: Adding an article• Go to Content >

+Add content. • Select article. • Review the form.

Content > + Add content > Article

Structured input and display

Link: a module providing a field type

Manage > Structure > Content types > Article > Manage fields

Demo: Adding a field• Enable Link

module.• Add a new field to

the article content type.

• Test by creating an article.

Extend > Link module

Task: Customize a content typeA. Create an articleB. Enable Link

moduleC. New field on

ArticleD. Test Articles

Review• Structuring data

input. • How else could you

validate?• What other content

would you model for this site?

Add fields to…

Content typesBlocksComment formsContact formsTermsUsers

Any “Content entity types” in Drupal 8

You can create your own drupal.org/node/2166447

Drupal Entities

Entities are one instance of an entity type.

Each has a unique ID.

These are examples of “Content entities” in Drupal.

Examples of content entities in Drupal 8

Block exampleDefault basic block has one body text field. What if you want an image and a link?

With “Block Types” in Drupal 8, you can add fields.

Such as an image or link field.

Add fields to block types

Lesson 5: Building Drupal sitesGet familiar with Drupal lingo

In Lesson 5• Presentation: Displaying content• Demo: What’s available. Options for

data input and display. Creating a view.

• Task: Create a View to list content.

Most sites: Lists of data?• Dynamic lists of

content• Users, members• By terms or

categories• Most

popular/commented Visit http://opensource.com an example Drupal site

Views wizardOnce you select the base table of your query this can’t be changed.

Base table (content, user, terms, etc) cannot be changed later.

How to format & displayWhat to select & filter

Views UI

Demo: List of articles

• Add list of Articles

• Tab in main menu

Structure > Views > + Add new view

Task: Create a list of articles• Add a view• Select options for

Content type > Article.

• Challenge: Change display!

Structure > Views > + Add new view

Review• Use Views to list

content, users, terms, comments, etc.

• Compare to examples you’ve done in other systems/frameworks.

Next: Extending Drupal

Everything is configurable

Change the image styles!

You can change the display and even the image styles, crop, etc.

Review!

How was this built?Inspect the code and body tag for information.

Go have a look!

drupal.com/get-started-with-drupal

Answer?

drupal.com/get-started-with-drupal

How are these components added?

Inspect the elements and look for clues.

Answer?All are blocks(in red)

Some parts come from Views(in blue)