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

1. Hong Kong Drupal User Group
(HKDUG)
Website DIY with Drupal 8
HKOSCon 2015
2015 Jun 26th

2. Edison Wong
●
2005 - Drupal Developer & Contributor
– https://drupal.org/user/33940
●
2008 - HKDUG Co-founder
– https://groups.drupal.org/drupalhk
●
2010 - CEO, PantaRei Design
– hswong3i@pantarei-design.com

4. 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

6. 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

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

14. Drupal 8 Quick Overview
●
About Drupal
●
Drupal Showcases
●
Drupal 8 Feature Highlight
●
Drupal 8 Release Status

15. 
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.

17. Drupal Showcases

South China Morning Post

The White House

Tesla Motors

Twitter

LinkedIn Developers

American Red Cross

24. Drupal 8 capabilities
drupal.org/drupal-8.0

25. 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

26. Drupal 8 Release Status

27. What's Next?

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

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

31. Task: Get into your site
• Everyone has their
site installed?
• If so, try changing
your site title.

32. 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”

33. Other CMSs?
This example is Typo3, what is your previous CMS like?
Page added
“into” site
structure

34. Drupal holds data
Structured data: referred to as “Content entity” types in D8.
Articles
Users
Basic
pages Comments
“
“
Terms
Blocks

35. Demo: Add a page
• Add a Basic page.
• Add link to menu.
• Manage menu.

36. Task: Add a basic page
• Add a “Basic page”.
• Link from the “Main
menu.”
• Challenge: Manage
menu or Add an article.

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

38. Structured data: Fields
Compare: Which allows for better input and display control?
In HTML:
Body text
Tags
Location
Media (video, images)
Title
Image upload
Title
Location
Tags
Body text

39. 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

40. Drupal Entities
Taxonomy termsUsers
E. Webb
Germany
J. Beeman
Spain
adventure
city break
sailing
shopping
city break
Comments
dwight
8 Sept
Wow, can't
wait to get
visit.
joe
8 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

41. Consider your design
• Limit your fields to only what you need to reuse
and display.

42. 3 example display options
View modes

43. Flexibility for different conditions
With Drupal, you can reuse content intelligently.

44. Demo: Adding an article
• Go to Content > +Add
content.
• Select article.
• Review the form.
Content > + Add content > Article

45. Structured input and display

46. Link: a module providing a field type
Manage > Structure > Content types > Article > Manage fields

47. Demo: Adding a field
• Enable Link module.
• Add a new field to the
article content type.
• Test by creating an
article.
Extend > Link module

48. Task: Customize a content type
A. Create an article
B. Enable Link module
C. New field on Article
D. Test Articles

49. Building Drupal Site
●
Displaying Content
●
What is Views?
●
Create a View to List Content

50. 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

51. 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.

52. How to format & displayWhat to select & filter
Views UI

53. Demo: List of articles
• Add list of Articles
• Tab in main menu
Structure > Views > + Add new view

54. Task: Create a list of articles
• Add a view
• Select options for
Content type > Article.
• Challenge: Change
display!
Structure > Views > + Add new view

55. Everything is configurable

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

57. Customizing Your Site
●
Change Site Name
●
Change Theme
●
Customize Theme

58. Core themes
Bartik: Default theme Stark: Default core markup
Currently under development

59. Task: Change theme
• Change to Classy or
Stark.
• Inspect markup.

60. What's Next?
●
Drupal and the Community
●
Online Resources

61. Who’s using Drupal?
drupalshowcase.com

62. How are they using it?
• In every industry from
large sites to small.
• In-depth case studies on
Drupal.org.
drupal.org/case-studies

63. 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

64. Mobile in its DNA

Administration pages: a snap to use

New administration experience

Mobile-first Back to site button

67. 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.

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

70. 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.

72. Field Power

More field types in core

Attach fields to more types of content

Entity reference, link, date, e-mail, telephone,
etc.

74. Views, Out of the Box

Easily customize the front page, listing
blocks, and more.

Simply create custom admin pages,
customize filters, actions, and more.

77. 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.

78. Developing with Drupal 8
api.drupal.org/api/drupal/8

79. Building with Drupal

80. Contributed modules
• The majority of your
development will rely on
contributed code.
drupal.org/project/project_module

81. Reporting issues
• Use the Issue queue
• Search first
• Report issues
drupal.org/node/317

82. Open Source Software = Community
All photos by Kathleen Murtagh code sprints (CC BY 2.0)

83. How big is the community?
Hint: For latest data, check “d.o”

84. 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/

85. 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

90. Task: Search for modules
• Search through
contributed modules.
drupal.org/project/project_module

91. Online Resources

Drupal Tutorial:
 http://www.siteground.com/tutorials/drupal/
 http://www.techiestuffs.com/learn-drupal-best-d
rupal-online-resources-for-beginners-and-develo
pers/

Community Document:
 https://www.drupal.org/documentation

Drupal Code Search:
 http://www.drupalcodesearch.com/

92. Q&A

93. 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/

94. 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

95. Address: Unit 326, 3/F, Building 16W
No.16 Science Park West Avenue,
Hong Kong Science Park, Shatin, N.T.
– Phone: +852 3576 3812
– Fax: +852 3753 3663
– Email: sales@pantarei-design.com
– Web: http://pantarei-design.com
Contact us