[HKDUG] #20160626 - HKOSCon 2015 - Website DIY with Drupal 8

Hong Kong Drupal User Group(HKDUG)

Website DIY with Drupal 8

HKOSCon 20152015 Jun 26th

Edison Wong

● 2005 - Drupal Developer & Contributor– https://drupal.org/user/33940

● 2008 - HKDUG Co-founder– https://groups.drupal.org/drupalhk

● 2010 - CEO, PantaRei Design– [email protected]

PantaRei Design● Everything Changes and Nothing Remains Still● Reinvent Enterprise with Open Source Software and Cloud Computing● Hong Kong based FOSS service provider

– Content Management System (CMS) with Drupal– Cloud Hosting Solution with Amazon Web Services (AWS)– Team collaborate solution with Atlassian

● Business Partner with industry leaders– 2012, AWS Consulting Partner– 2013, Acquia Partner– 2013, Atlassian Experts– 2014, Rackspace Hosting Partner

● http://pantarei-design.com

Hong Kong Drupal User Group● The Hong Kong Drupal User Group are open to everyone with

an interest in Drupal and are a great opportunity to learn more about what Drupal can do and what folks are building with it.

● Drupal is a free software package that allows you to easily organize, manage and publish your content, with an endless variety of customization.– Event organizing: http://www.meetup.com/drupalhk– Technological discussion: https://groups.drupal.org/drupalhk– Business connection: http://www.linkedin.com/groups/?gid=6644792– General sharing: https://www.facebook.com/groups/drupalhk

Outline

● Drupal 8 Quick Overview● Assembling Pages● The Drupal Magic Trick● Building Drupal Site● Customizing Your Site● What's Next?

Drupal 8 Quick Overview

● About Drupal● Drupal Showcases● Drupal 8 Feature Highlight● Drupal 8 Release Status

Open source content management system. Web application framework. Design and Display. Collaborative and Administrative. Many tools to organize, structure, find and re-

use the content. Interact with external media and file services.

Drupal Showcases

South China Morning Post The White House Tesla Motors Twitter LinkedIn Developers American Red Cross

Drupal 8 capabilities

drupal.org/drupal-8.0

What does Drupal 8 run on?

• Built in PHP, HTML, CSS, JS.

• LAMP stack is most widely used and tested.

• Other OSs, servers, DBs possible (in orange)

Details drupal.org/requirements

Drupal

Framework: Symfony

Language: PHP

Server: Apache Database: MySQL

Operating System: Linux

Drupal 8 Release Status

What's Next?

Assembling Pages

● Get Your Drupal 8 Testbed!● Let's Create a Page!● Add Page to Main Menu● Administrate Content

simplytest.me

Evaluate Drupal projects online. Just Try It! http://simplytest.me/project/drupal/8.0.x

Task: Get into your site

• Everyone has their site installed?

• If so, try changing your site title.

Limited by a mental model

example.com section

section

page

pagepage

page

Home page

About us

Team

Mission

News

Category

Category

News item

News item

Services

Your "mental" site map

“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

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.

The Drupal Magic Trick

● What is Content Type?● How Drupal's Entity Works? ● Add a Field to...

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 settingsGeneric Content type settings

TitleTitle

AuthorAuthor

Date publishedDate published

CommentsComments

Menu optionsMenu options

RevisionsRevisions

Article + fields:Article + fields:

ImageImage

Body textBody text

TagsTags

Tips + fields:Tips + fields:

VideoVideo

Body textBody text

TagsTags

LinkLink

Drupal EntitiesTaxonomy termsUsers

E. WebbGermany

J. BeemanSpain

adventure

city break

sailing

shopping

city break

Comments

dwight8 Sept

Wow, can't wait to get visit.

joe8 Sept

Me too!

Content (nodes)

• Pet-friendly holidays for the whole family.

• Drum and dance in Mali.

• Indian adventure on a river boat cruise.

• Mud baths and hot springs of Beppu.

• Hidden Paris by night in the winter.

Blocks

Block title

Block text here. Some information about something.

http://link123.com

Contact forms

Subject

Message text field.

Custom fields as needed.

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

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 type

A. Create an article

B. Enable Link module

C. New field on Article

D. Test Articles

Building Drupal Site

● Displaying Content● What is Views?● 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 wizard

Once 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

Everything is configurable

Change the image styles!

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

Customizing Your Site

● Change Site Name● Change Theme● Customize Theme

Core themes

Bartik: Default theme Stark: Default core markup

Currently under development

Task: Change theme

• Change to Classy or Stark.

• Inspect markup.

What's Next?

● Drupal and the Community● Online Resources

Who’s using Drupal?

drupalshowcase.com

How are they using it?

• In every industry from large sites to small.

• In-depth case studies on Drupal.org.

drupal.org/case-studies

Drupal 8 Feature Highlight● Mobile in its DNA● Multilingual Capabilities● Accessibility Integration● Effortless Authoring● Field Power● Views, Out of the Box● Build-in Web Services

Mobile in its DNA

Administration pages: a snap to use New administration experience Mobile-first Back to site button

Multilingual Capabilities Translate anything in the system with built-in

user interfaces. Build pages with Views language filtering and

block visibility. Get software translation updates automatically

from the Drupal community.

Accessibility Integration More Semantic Aural Alerts Controlled Tab Order Hidden/Invisible/On-focus Fieldsets jQuery UI Alt Text Bartik

Effortless Authoring

In-place editing of content without having to use the full edit form.

WYSIWYG configuration made easy with web security in mind.

Draft saving made easier.

Field Power

More field types in core Attach fields to more types of content Entity reference, link, date, e-mail, telephone,

etc.

Views, Out of the Box

Easily customize the front page, listing blocks, and more.

Simply create custom admin pages, customize filters, actions, and more.

Built-in Web Services

Build mobile apps – Drupal as the data source– Even post back to Drupal from the client

Implement state-of-the-art Hypertext Application Language (HAL)

Expose content as JOSN, XML, etc.

Developing with Drupal 8

api.drupal.org/api/drupal/8

Building with Drupal

Contributed modules

• The majority of your development will rely on contributed code.

drupal.org/project/project_module

Reporting issues

• Use the Issue queue• Search first• Report issues

drupal.org/node/317

Open Source Software = Community

All photos by Kathleen Murtagh code sprints (CC BY 2.0)

How big is the community?

Hint: For latest data, check “d.o”

DrupalCon

• 1500-3000 attendees– 5 days of learning and

collaboration– Affordable tickets– Scholarships!

• Q: Where's the next DrupalCon?Hint! association.drupal.org/drupalcon

“Trivia night” Photo by Josef Jerabek (CC BY-NC-ND 2.0)https://www.flickr.com/photos/pepej/15451001565/

Task: Connect locally

• Attend meet-ups• DrupalCamps (local

conferences) • Training – Free Global

training days and paid training.

What is happening next in your area? http://drupical.com

Task: Search for modules

• Search through contributed modules.

drupal.org/project/project_module

Online Resources

Drupal Tutorial: http://www.siteground.com/tutorials/drupal/ http://www.techiestuffs.com/learn-drupal-best-d

rupal-online-resources-for-beginners-and-developers/

Community Document: https://www.drupal.org/documentation

Drupal Code Search: http://www.drupalcodesearch.com/

Q&A

References● http://www.slideshare.net/AcquiaInc/ready-set-drupal-an-intro-to-drupal-8-part-1● http://www.slideshare.net/AcquiaInc/ready-set-drupal-an-intro-to-drupal-8-part-2● http://cmsmatrix.org/● https://www.drupal.org/drupal-8.0● http://simplytest.me/project/drupal/8.0.x● http://www.drupalshowcase.com/● http://trends.builtwith.com/cms● http://barcamp.hk/● http://cms.about.com/od/cms-basics/a/Pros-And-Cons-Of-Joomla-Wordpress-And-

Drupal.htm● http://www.adobe.com/sea/products/cq/web-content-management.html#wcm● http://www.meetup.com/drupalhk/events/207982752/

I Need More Help!● Read documents from Drupal Community

– https://drupal.org/documentation● Join Hong Kong Drupal User Group

– Event organizing: http://www.meetup.com/drupalhk– Technological discussion: https://groups.drupal.org/drupalhk– Business connection: http://www.linkedin.com/groups/?gid=6644792– General sharing: https://www.facebook.com/groups/drupalhk

● Contact us for one (1) month free-trial support service– http://pantarei-design.com/services/support/#support-service-plans

Address: Unit 326, 3/F, Building 16WNo.16 Science Park West Avenue,Hong Kong Science Park, Shatin, N.T.– Phone: +852 3576 3812– Fax: +852 3753 3663– Email: [email protected]– Web: http://pantarei-design.com

Contact us