[HKDUG] #20160626 - HKOSCon 2015 - Website DIY with Drupal 8
-
Upload
wong-hoi-sing-edison -
Category
Technology
-
view
168 -
download
1
Transcript of [HKDUG] #20160626 - HKOSCon 2015 - Website DIY with Drupal 8
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
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”
Drupal holds data
Structured data: referred to as “Content entity” types in D8.
Articles
Users
Basic pages Comments
“
“
Terms
Blocks
Task: Add a basic page
• Add a “Basic page”.• Link from the “Main
menu.”• Challenge: Manage
menu or Add an article.
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
Demo: Adding an article
• Go to Content > +Add content.
• Select article. • Review the form.
Content > + Add content > Article
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
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.
Task: Create a list of articles
• Add a view• Select options for
Content type > Article. • Challenge: Change
display!
Structure > Views > + Add new view
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
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)
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/
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