Drupal 8 Every Day: An Intro to Developing With Drupal 8

Drupal 8 Every Day
An Intro to Developing With Drupal 8

Erin Marchak
● Acquia Certified Front End Specialist, and Developer
● dgo.to/@emarchak
Geoff Appleby
● Acquia Certified Developer
● dgo.to/@gapple
● Persistent Login & drupalreleasedate.com

1. Unboxing
2. Installation
3. Configuration Management
a. Development Workflow
b. Export
c. Import
4. Development
a. Module Generation
b. Page Controllers
c. Entity Bundles
d. Forms
5. Theming
a. Theme Generation
b. Twig Syntax
c. Debugging
d. Including Assets

Unboxing Drupal 8
New Features
Configuration Management
Twig replaces PHPTemplate
PHPUnit supplements SimpleTest
Responsive base theme & admin
Fast by Default
New modules in core
Requirements
Minimum
PHP 5.5.9
MySQL 5.5.3
Recommended
PHP 5.6.5
APCu
New file structure
Core is now in ./core
Modules are now in ./modules
Profiles are now in ./profiles
Themes are now in ./themes

Drupal Console
Interactive console
Scaffolding
Site Management
What about Drush?
curl -LSs http://drupalconsole.com/installer | php

ProductionDevelopment
Active
Storage
Active
Storage
Code Repository
Sync Storage
ImportExport

Configuration Management
Move database settings to settings.local.php
Uncomment include() statement
Set config sync directory in settings.php
$config_directories[CONFIG_SYNC_DIRECTORY] = __DIR__ . '/config';
cp example.gitignore .gitignore
git add -f sites/default/settings.php
mkdir sites/default/config

Configuration Management - Export
Console creates an archive of YML files
drupal config:export
Drush outputs YML files directly to the sync directory
drush config-export

Configuration Management - Import
Console imports an archive of YML files
drupal config:import [file name]
Drush imports YML files directly from the sync directory
drush config-import

Development - Generate a Custom Module

Development - Generate a Page Controller

Development - ./photography.routing.yml
photography.gallery_controller_gallery:
path: '/photography'
defaults:
_controller: 'DrupalphotographyControllerGalleryController::gallery'
_title: 'Photography Gallery'
requirements:
_permission: 'access content'
photography.order_form:
path: '/photography/order'
defaults:
_form: 'DrupalphotographyFormOrderForm'
_title: 'Photo Order Form'
requirements:
_permission: 'access content'

Development - ./src/Controller/GalleryController.php
/**
* @file
* Contains DrupalphotographyControllerGalleryController.
*/
namespace DrupalphotographyController;
use DrupalCoreControllerControllerBase;
/**
* Class GalleryController.
*
* @package DrupalphotographyController
*/
class GalleryController extends ControllerBase {
/**
* Helper function to load all published photographs.
*/
public function loadAllPhotos($bundle_type = 'photograph') {...}
/**
* Gallery display.
*/
public function gallery() {...}
}

Development - Generate an Entity Bundle

Development - GalleryController->loadAllPhotos()
/**
* Helper function to load all published photographs.
*
* @param string $bundle_type
* @return DrupalCoreEntityEntityInterface[]
* Array of node objects keyed by nid.
*/
public function loadAllPhotos($bundle_type = 'photograph') {
// Return the entity manager service and load the the storage instance for nodes.
// That way we have access to the enity api while keeping our controller lean.
$storage = $this->entityManager()->getStorage('node');
// loadByProperties() allows us to query and load entities in one line!
return $storage->loadByProperties(array(
'type' => $bundle_type,
'status' => 1,
));
}

Development - GalleryController->gallery()
/**
* Gallery display.
*/
public function gallery() {
$langcode = $this->languageManager()->getCurrentLanguage('language');
$photographs = $this->loadAllPhotos();
$view_mode = 'teaser';
$gallery = array();
// Loop through the loaded photograph node objects and output their rendered result into a list.
$viewBuilder = $this->entityManager->getViewBuilder('node');
foreach ($photographs as $photograph) {
$gallery[] = $viewBuilder->view($photograph, $view_mode);
}
// If the gallery is empty, we should apologise.
if (empty($gallery)) {...}
// Return an item list of photographs for our gallery.
return [
'#theme' => 'item_list',
'#items' => $gallery,
];
}

Development - ./src/Form/OrderForm.php
/**
* @file
* Contains DrupalphotographyFormOrderForm.
*/
namespace DrupalphotographyForm;
use DrupalCoreFormFormBase;
use DrupalCoreFormFormStateInterface;
/**
* Class OrderForm.
*
* @package DrupalphotographyForm
*/
class OrderForm extends FormBase {
public function getFormId() {...}
public function buildForm(array $form, FormStateInterface $form_state) {...}
protected function validPostalCode(string $postal_code) {...}
public function validateForm(array &$form, FormStateInterface $form_state) {...}
public function submitForm(array &$form, FormStateInterface $form_state) {...}
}

Development - ./Tests/src/OrderFormTests.php
/**
* @file
* Contains DrupalphotographyTestsOrderFormTest.
*/
namespace DrupalphotographyTests;
use DrupalTestsUnitTestCase;
use DrupalphotographyFormOrderForm;
/**
* Tests validation of postal codes.
*
* @group photography
*/
class OrderFormTest extends UnitTestCase {
...
/**
* Test valid postal codes.
*/
public function testPostalCodeValid() {...}
/**
* Test invalid postal codes.
*/
public function testPostalCodeInvalid() {...}

Theming with Twig - generate:theme

Twig Syntax
PHPTemplate Twig
<?php print $variable ?> {{ variable }}
<?php if (condition): ?> {% if condition %}
<?php foreach ($users as $user):
?>
{% for user in users %}
<?php print t(“string”) ?> {{ “string”|t }}

{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
<div{{ content_attributes.addClass('node__content') }}>
{{ content }}
</div>
</article>

Twig Debug
sites/default/services.yml
parameters:
twig.config:
debug: true




<nav role="navigation"
aria-labelledby="block-bartik-main-menu-menu"
id="block-bartik-main-menu"
class="contextual-region block block-menu navigation menu--main">

Adding CSS
portfolio.libraries.yml
global-styling:
version: 1.x
css:
theme:
css/portfolio-global.css: {}
portfolio.info.yml
libraries:
- portfolio/global-styling

Questions or Comments? We’d love to hear from you!
twitter.com/emarchak
twitter.com/gappleca
twitter.com/myplanetHQ
We can also help with your Drupal projects.
We know how to nudge the big wigs to give D8 a chance.
Extra pair of hands to plug in and help out.
That’s all, folks!

Resources
Github Repository https://github.com/gapple/drupal-8-every-day
Database Dump https://drive.google.com/file/d/0B-PTT5Vfuw18RTdId2poQUFNR1E/view
Drupal Console https://www.drupal.org/project/console
Theming Guide https://www.drupal.org/theme-guide/8
CMI Documentation https://www.drupal.org/documentation/administer/config

Drupal 8 Every Day: An Intro to Developing With Drupal 8

More Related Content

What's hot (20)

Similar to Drupal 8 Every Day: An Intro to Developing With Drupal 8 (20)

More from Acquia (20)

Recently uploaded (20)

Drupal 8 Every Day: An Intro to Developing With Drupal 8

Editor's Notes