Drupal 8 Blueprints E-Book

Alex Burrows

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 220

Veröffentlichungsjahr: 2017

Beschreibung

Drupal is an open source content management framework that can be used for developing websites and simplifying online management of content for users.

This book is a must-have for web developers who are looking to create professional-grade websites using Drupal 8. While building 7 different Drupal websites, we will focus on implementing the out of the box features that come with Drupal 8 and see how we can make some complex sites with minimal custom code.

Focusing completely on Drupal 8, this book will help you leverage the new Drupal 8 features such as creating a different types and layouts of content using configuration to build in core with its built-in web services facilities, and effortless authoring using the new CKEditor with an effortless and efficient industry standard approach.

The book starts with getting started with the development environment of Drupal. Each chapter will start with a brief overview of the site to be built and the required features. Then, we will proceed to create customized modules and themes and integrate third-party plugins. Lastly, you will learn about "headless" Drupal that uses RESTful services that would help you to display content outside of Drupal

By the end of the book, you will be able to implement the knowledge gained to build your own custom websites using Drupal 8.

Leseprobe

Table of Contents

Introduction and Getting Set Up

Setting up for local development

Setting up on Windows

Setting up on macOS

What is SSH?

Our great development tools for macOS

Homebrew

iTerm

Oh My Zsh

Setting up our local development environment

Native

Acquia DevDesktop

Vagrant

Docker

Terminology

Drush and Drupal Console

Installing Drupal

Getting our basic site

Drupal core structure

Downloading modules and themes

Using themes

blueprint.info.yml

Getting involved with Drupal

Let's get Drupal started!

Telling Your Own Story with Drupal

Creating the Post content type

Creating our fields

Adding our fields

Adding taxonomy vocabulary

Adding fields to our vocabulary

Adding more fields

Creating content

Creating our view modes

What we will need to do

How's it done

Customizing our Post

Displaying content with views

Understanding views

Using blocks a brief overview

Block admin UI

How it's done

Adding our block

Adding a block

Relating content

What we will do

Adding our entity reference field

How it works

Creating a related news block

Using Contextual filters

Previewing content

Using relationships to show content

Adding our new block to our Post content type

Making our display look better

Adding comments

How do comments work

Comment types

What this means for us

Attaching comments

Moderation

Permissions

Listing and filtering content

Exposed filters

Restricting content by role

How to do it

Adding restricted content to views

Editing content

Moving to the frontend

Adding CSS and JavaScript

Summary

Get Fundraising with Drupal

What will we learn?

Getting started

Creating our fundraising pages

Donation content type

Fundraising content type

Registering users

Account settings

Creating our users

Authenticated users

Building the fundraising page

Creating a dashboard

Understanding view field settings

Showing user's their content

Allowing users to donate

What we will do

How modules work

Structure of a module

Creating our module

donate.info.yml

What we need

How we do it

Creating a block

Annotations

Creating a node programmatically

$form state object

Sending emails

donate.module

Donation progress bar

donation_progressinfo.yml

DonateRangeBlock.php

DonateRangeBlock.php

Theming our plugin

DonateRangeBlock.php

donate-range.html.twig

Finishing off

DonateRangeBlock.php

donate-range.html.twig

DonateForm.php

Recruit Using Drupal

Getting started

What is Composer?

Using Composer with Drupal

What we need

Creating user registration pages

Candidate role

Using Webform

Creating our job

Jobs module

jobs.info.yml

jobs.module

What we have done

Almost there

Dashboards for Recruiter

Job search

Summary

List Properties with Drupal

Getting prepared

Cleaning up

Adding our Property

Enhancing our content

Display Suite

Adding custom fields to our display

Property search

Generate dummy content

Property search

Exposed filters as a block

Administer our properties

SEO-friendly paths

Summary

Express Your Event with Drupal

Getting started

Creating our user roles

Creating our session

Time and date

Room

Skill level

Tracks

Entity reference fields

Restricting fields

Managing permissions

User dashboard

User creation

User fields

Session submissions

event_speaker.info.yml

event_speaker.module

Session management

Session display

Session sharing

Attendees

Summary

Get Teaching with Drupal

Getting started

Categorizing our Lessons

Video embed

Using Panels

Using variants

Harnessing the power of variants

Organizing our Lessons

Creating a listing of Lessons

Summary

Go Static with Drupal

Getting started

What is REST?

How does it work in Drupal?

Exposing Drupal using REST API

Filter endpoint dynamically

Let's go React

Getting ready for React

Creating our frontend

Summary

There's more in core

One last thing

Introduction and Getting Set Up

Welcome to Drupal 8 Blueprints!

I'm Alex Burrows, and I'll be your guide for this journey through building websites using Drupal 8.

Firstly, this book is aimed at beginner to intermediate-level developers. You'll need an understanding of how websites work and some PHP knowledge, as we will later delve into writing some custom modules, but mostly, this book will use Drupal's powerful configuration.

Throughout the book, we will go over things we covered earlier; however, the aim is to understand the basics and, if at any time, you become unsure, review the chapter where it was covered.

We will cover the following to get you ready to build websites using Drupal 8 first:

Setting up for local development:

Setting up on Windows

Setting up on macOS

What is SSH?

Our great development tools:

Homebrew

iTerm

Oh MyZsh

Setting up our local development environment:

Native

Acquia DevDesktop

Vagrant

Docker

Terminology

Drush and Drupal Console

Installing Drupal:

Getting our basic site

Drupal core structure

Downloading modules and themes

Using themes

Get involved with Drupal

So, get ready to learn and build some awesome websites using Drupal 8!

Setting up for local development

As we will start a site that requires PHP and MySQL to run, we need to set up a local development environment.

There are many ways that this can be achieved; the most favorable ones are Vagrant and Docker. Oh, and of course, if you're developing a Drupal site, Acquia DevDesktop is a good option as well. This book is highly focused on you developing Drupal on a macOS; however, there are other explanations on how to do this on Windows, and Acquia DevDesktop works on Windows. I will explain how to set up shell on Windows as well, but the only local tool I recommend for now is Acquia DevDesktop as I have had many issues with Vagrant on a Windows machine.

Setting up on Windows

Firstly, since Windows is not a Unix-based operating system, we need to install Git for Windows(https://git-for-windows.github.io). This includes setting up your machine with Git Bash, Git Gui, and Shell Integration.

However, as for Windows 10, it allows Bash (https://msdn.microsoft.com/en-gb/commandline/wsl/about), and the website--https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10--has some great tutorials that explain how to set up.

Setting up on macOS

As a developer, I love macOS, because for me it just works. I have multiple tools that I use and highly recommend, which I will go into more depth further on in this chapter.

What is SSH?

Secure Socket Shell, otherwise known as (SSH), allows us to access our directories and files on our operating system, whether it's on our local development environment or our live web server.

In order to do this on macOS, we need to launch the Terminal application. On Windows, we can use the Bash application that was explained earlier.

We can execute commands with SSH to do this; for example, we can change to another folder/directory using the following:

cd mydirectory

Alternatively, we can create a new folder/directory using this:

mkdir mydirectory

These are just some examples of SSH commands, and I encourage you to take a look into this.

When we are doing this development, especially where we are using dynamic code such as PHP, we need to be able to add other tools using the command line.

Our great development tools for macOS

There are some very important tools that I use for development. These not only make my processes quicker, but they also allow me to enhance my development environment to how I need it.

An example of this is that if I might need to install an add-on quickly, I can do this using Homebrew.

Some of the helpful add-ons I use are as follows:

Homebrew

iTerm

Oh My Zsh

Homebrew

The first important tool is HomeBrew (no, it's not teaching you how to make some alcohol at home). It is a fantastic addition to the shell that allows us to execute and install packages very easily.

If you go to https://brew.sh, you can copy and paste into Terminal and away you go, with very simple commands, such as the following:

brew install curl

What the preceding command will do is to download and install the curl package for us. This is just an example of what it does.

iTerm

As it says on their website:

"iTerm2 is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.8 or newer. iTerm2 brings the Terminal into the modern age with features you never knew but always wanted."

This allows us to make our experience using the Terminal a lot better (https://www.iterm2.com).

Oh My Zsh

This allows us to run commands and shortcuts. We don't have to type out full commands, as we did earlier, and we can use our own commands and shortcuts to achieve tasks a lot quicker (http://ohmyz.sh).

Setting up our local development environment

As with anything, there are a lot of choices for local environments. These are just samples of the ones that are there and what they do.

Native

As macOS is built on a Unix framework, you can use this entirely to run your local host, and its just a case of editing some files on your mac and changing them. There is some great documentation on this at (http://php.net/manual/en/install.macosx.bundled.php).

Acquia DevDesktop

This is an all-inclusive application that allows you to get started and set up with making your Drupal websites locally. We will indeed use this for the entire book. It creates the URL for your local website as well as the database and Drupal core.

We use this at Drupal events, and we are mentoring people new to Drupal (https://www.acquia.com/gb/products-services/dev-desktop).

The next two require VirtualBox. This allows us to create virtual machines on both mac and Windows. From here, we can create our separate machines and download OS images that will allow us to install Linux OS, or if you have a Windows disk, you can install this (https://www.virtualbox.org/wiki/Downloads).

Vagrant

This allows you to create and define what your virtual machine will have and require (https://vagrantup.com).

Vagrant provides the same easy workflow regardless of your role as a developer, operator, or designer. It leverages a declarative configuration file that describes all your software requirements, packages, operating system configuration, users, and more.

One great VM to use for Drupal can be found at (https://www.drupalvm.com).

I personally use this for all local development.

Docker

This again allows you to create and define what your development environment will have, but it uses a thing called containers to achieve this (https://www.docker.com).

Using containers, everything required to make a piece of software run is packaged into isolated containers. Unlike VMs, containers do not bundle a full operating system; only libraries and settings required to make the software work are needed. This makes for efficient, lightweight, self-contained systems and guarantees that the software will always run the same, regardless of where it's deployed.

Terminology

Within Drupal and the community, there is some terminology that we use; the following are some of them along with what they mean:

Content type

: This is an entity type, and the individual content types within it are called bundles; in this case, we have a basic page bundle and an article bundle 

by default

Node

: A node is a piece of content; this is usually within a content type, and a content type is indeed an entity type

Taxonomy

: This is another name for a category, so we can distinguish types of content based on the category name; this is usually used for filtering content

Themes

: This is what makes our site look the way it is

Modules

: Another name for a plugin that adds functionality to Drupal

Drush and Drupal Console

In Drupal, we have some powerful tools that allow us to run commands to execute on our website. This is all run using the command line; an example of this is that we can download themes and modules directly off Drupal.org just by running one command.

Both Drush and Drupal Console are very similar in what they do, and it's down to preference as to which you prefer. For this book, we will use Drupal Console.

Installing Drupal

For now, we will just install Drupal using DevDesktop; however, we will change how we do this later on.

To do this, open up DevDesktop, then bottom left click on +, and then select New Drupal Site. Then, once the popup appears, click on Install in the row that Drupal 8 is in. This will appear with a popup:

Fig 1.0: Install Drupal 8.x site

Once this is done, click on the Local site:

Fig 1.1

In the preceding Fig 1.1, we can now get our Drupal site up and running.

We can see four lines of content:

Local site

: This is the URL that our website is accessible on locally

Local code

: This is where our code is currently located; further along, there is a little square button

on the right

, which launches a Terminal window

Local database

: This is the name of our database

PHP version

: This is the version of PHP being used

Getting our basic site

Now that we have downloaded and set up our Drupal site to work on our local environment, let's begin installing our site.

The installer will ask various questions; however, as we are using DevDesktop, we don't need to enter any database connection details, but when we use this on a different local environment or even our production environment, it is all required.

Drupal core structure

In Drupal, we have several locations where our contrib and custom code go. The following figure illustrates the directory and file structure for Drupal 8.x core:

All custom and contrib items need to go into either modules, profiles, or themes.

The recommended structure inside these directories to add the contrib and custom directories. Consider the following examples:

Modules:

/modules/contrib

/modules/custom

Profiles:

/profiles/contrib

/profiles/custom

Themes:

/themes/contrib

/themes/custom

There are other key directories here that don't need to be touched, but there is also a sites directory, which contains our sites configuration to access the database, files storage, libraries, and services.

Downloading modules and themes

Once our site is installed, we need to download our base theme for our site, so we can do the following to get modules or themes:

Download directly from

Drupal.org

https://drupal.org/project/{module or theme name}

Download using Drush

drush dl project, for example, drush dl bootstrap

Download using Drupal console

drupal:download project

Using themes

With Drupal, we can start a site without writing any code for a theme, as Drupal core comes with the following accessible themes:

Bartik

Seven

Stark

Apart from these three, there are two others that are used as the entire base of Drupal core--Stable and Classy.

Classy is a subtheme of stable, makes Drupal look the way it does, and adds classes.

However, we want to get started with our own theme. So to do this, we need to open Terminal. As stated earlier, the button in DevDesktop on the right-hand side will launch our Terminal window.

Once this is open, we can download our modules and themes straight into our Drupal site. For this book, we will use Bootstrap as our base theme and then create our own theme:

drush dl bootstrap

This will download the Bootstrap theme (https://drupal.org/project/bootstrap) into our themes directory.

Now that we have Bootstrap downloaded, let's create a really basic theme so that we can add onto it later on. Inside our /themes/custom directory, create a new directory called blueprint.

This is where our custom theme will be stored; inside this, we have the ability to add our frontend structure, which includes our templates, CSS, and Javascript.

Start by creating a file called blueprint.info.yml; note that we have it structured as THEMENAME.info.yml.

In Drupal 8.x, we have adopted the use of YAML files, and you will note that all configuration in Drupal uses this format.

blueprint.info.yml

name: Blueprintdescription: Bespoke theme for Drupal 8 Blueprintstype: themecore: 8.xbase theme: bootstrap# Regions

What this does is to tell Drupal: Hey I'm a new theme, this is what I do. It's set out like this:

Name

: This is what we are calling our theme, following the same name we have given to our themes directory.

Description

: This is a simple description of the theme, and it shows in the Drupal admin interface.

Type

: This is saying that this is for a theme; if it was for a module, it would be module instead.

Core

: As this is for Drupal 8, we need to specify that it is for Drupal 8.x.

Base theme

: We are leveraging our theme files, styles, JavaScript, and templates off of the bootstrap library. This, of course, can be based on any other theme.

Now that we have done this, we are ready to start making a Drupal site and add it to our custom blueprint theme later on.

Getting involved with Drupal

Before we continue, it is recommended that you register at Drupal.org and set up a profile; this will help you vastly and will allow you to ask questions on Drupal.org, fix bugs, submit bugs, and become part of a fantastic community.

Within the Drupal community, we have two sayings:

Come for the code, stay for the community.There's a module for that!

Let's get Drupal started!

So, now that we have set up our first Drupal site, we can start with our first website!

There is a lot to learn in this book, so take your time.

Ensure that you have a caffeinated drink to hand or a glass of water, and enjoy unravelling the true power of Drupal!

Telling Your Own Story with Drupal

Latest news is an important part of any website for many businesses. They allow the business

to engage with their customers and keep their employees updated. In this chapter, we will create a simple news website using Drupal 8 core functionality. This can also be used as a blog; we're just making it sound exciting and relatable.

This chapter will be a little more in depth in showing how the basic functionality of Drupal works; this will allow quicker development later throughout the book.

We will explore the following topics in the chapter:

Creating a new content type

Creating taxonomy terms and associating them to news posts

Using custom views to display the listing and individual news pages

Enabling a comment field to allow user comments

Referencing other news articles on the site

Setting up restricted articles

Understanding permissions and roles

Configuring the editor experience

We will learn how to create a content type and implement the fields required for displaying the news articles; this is more of a refresher on how to do things. We won't go into this much detail on beginner items again. If in doubt, take a relook at this chapter.

We will also create custom view modes for displaying different display types using references from the post, and then finally, move into the theme layer inside twig templates for displaying the content.

Creating the Post content type

In Drupal, we use the terminology of entity, and we have bundles inside an entity. As part of the Drupal core functionality, we have content types, which is in fact an entity type and therefore the Post content type is a bundle.

So, now that we are familiar with some basic Drupal terminology, let's move on to creating our Post content type.

If you use the menu at the top and click on Manage | Structure | Content Types, you will be taken to the Admin page for Content types:

Fig 1.1: The content type management page

By default, we have two content types in a standard Drupal installation (Basic page and Article). Article is pretty much a Post content type; however, for this, we shall ignore this and create our own content type entirely from scratch.

To create a new content type, click on + Add content type:

Fig 1.2: The Add content type page

On this page, we are presented with some fields, which we use to set up how a content type works.

So, let's add the information for these fields:

Name

:

Post

Description

: Create a new post to display

Menu settings

: Uncheck all available menus

Click on Save and manage fields, and we have now started our Post content type.

The content type is split into four tabs:

Edit

: This allows for the settings we just added to be modified; however, you cannot change the machine name once the content type is created.

Manage fields

: This allows us to add/edit/remove fields from the content type. In the previous versions of Drupal, you could move the fields up and down to order how they appear on the form. This is no longer the case and appears under the

Manage form display

tab.

Manage form display

: This allows for the fields to be reordered and the formats to be amended for this page. This won't affect the

Manage display

tab. It will only be visible to any user who has permission to add, edit, or delete.

Manage display

: This allows the fields to be reordered for how they will appear on the display. It will affect the output of how the fields are displayed on the page.

Creating our fields

Now that we have our Post content type created, we need to add the fields we want to use:

Fig 1.3: Adding fields to content type

In Fig 1.3, we can see the layout for adding fields to our content type; we can see that there is already a field called Body, which is created by default; the field UI is split into four columns:

LABEL

: This is our user-friendly label; when we enter our label, this generates the machine name.

MACHINE NAME

: This is the unique name for the field; fields can be reused throughout Drupal, but only one per content type. If we create a field called subtitle, it will generate the machine name as

field_subtitle

; we can, however, override this to name it how we want.

F

IELD TYPE

: There are various types of fields (text, list, autocomplete, and so on), which are created by plugins, but for now these are the ones we have in Drupal core.

OPERATIONS

: These are the features of the field.

Edit

: This allows us to edit the basic settings for the field, including label, help text, default value, and any other configuration that is required for the field.

Storage settings (Field settings)

: This allows us to set the number of fields we require for this field.

Now that we have a basic understanding of the field system, let's move ahead and create our fields. We do, however, need to categorize the posts after we have created our basic fields so that we get an understanding of what happens; we will then add the categories known in Drupal as taxonomy.

Adding our fields

For our Post to show content, we need to add some fields so that the user can input content. For this, we will have three fields:

Post content

: This will be Text (formatted long, with summary)

Post comment

: This will be a comment field that utilizes the comment core module

Post category

: This will be a taxonomy term reference, which will look up our terms inside our taxonomy

Let's add our first field, Post content.

To do this, we click on + Add field; we are then redirected to a page that allows us to configure the field and its type. We are shown Add a new field and Re-use an existing field. We want to add a new field entirely, so from the drop-down list, let's select Text (formatted long, with summary). As you'll see, when we select this, we are greeted with a new field, Label. This field is the name of our field, so we shall use Post content as our label. When we enter this into the textfield, we see Machine name: field_post_content to the right:

Fig 1.5: Adding field details

In Fig 1.5, we can see the field settings all filled in; we are now ready to proceed to the second part of the field configuration:

Fig 1.6: Setting number of values

The Field API allows us to set as many for a field as we like. If we were to set unlimited, an Add another action button appears, and then another field is loaded.

After doing this, when we click on Save field settings, we will be taken to another settings page; depending on the type of field, there may be multiple fields for configuration on this field:

Fig 1.7: Configuring field

In Fig 1.7, we can see the following fields:

Label

: This appears above the field and will show on the display by default.

Help text

: This allows a description to appear beneath the field, and it is used as instructions to the user on what the field requires.

Required field