CMS

Week 6

Working with Drupal 8

Summary

  • Content modelling
    • Content types
    • Fields
    • Views
    • Relationships
    • Exercises: CT Course & View
  • User management
    • What
    • How to
    • Exercise: Webmaster role

Exercices

These slides contain exercices!

 

Please make this exercise on an empty Drupal 8 installation.

 

So you can use an existing installation if there is no content. (so no umami!)

 

Otherwise install a new one: imdschool

Use the Standard install profile

 

Content modelling

Content types

In Drupal, a Content Type is a pre-defined collection of data types (Fields) which relate to each other by an informational context.

 

In this sense, "context" means "parts that should be considered as a correlated whole."

Some simple examples

  • Teacher
    • Has a name, a function, an email address, a photo, ...
  • Course
    • Has a name, course information, files such as documents & courses, is given on a certain campus, ...
  • Campus
    • Has a name, an address, ...

But there are many others

All sources of information can be grouped like this.

 

Like a contractor who has a website showing projects that he has built. The project itself could be a content type containing fields for the name, address, a teaser description, longer text describing the build or materials used, an image album, references to used materials, ...

 

Then the used materials can be turned into a content type itself. It could support fields like: name, retail identification number, a reference to a retailer, ...

How to use

Content type parts

Drupal has 4 distinct parts to a content type:

  1. Edit page
    • same as add page
    • Manage settings
  2. ​Manage fields
    • ​Add & edit fields
  3. Manage form display
    • ​​Change how you add/edit content of this type
  4. Manage display
    • Manage the way the fields are displayed

​​​

Add/Edit Page

Manage fields

Manage form display

Manage display

View modes

How a node is displayed depends on the context in which it is viewed, such as the difference between full nodes and teasers.

View modes: full content

  • For a full page or detail page
  • Fields:
    • Displays all except for teaser-fields

View modes: teaser

  • Used in
    • overviews
    • lists
  • Fields:
    • Title (default) 
    • Photo

View modes: other?

You can enable more view modes or add custom ones

View modes: manage

Exercise

Add a content type: Course

Exercise

  1. Add a new Content type: Course
  2. Give it a description
  3. Disable previews
  4. Disable promoted to front page
  5. Hide author & submission date
  6. Make sure the following view-modes are enabled:
    1. Teaser
    2. Full content
  7. Add some content

Fields

Field terminology

  • Field. 
    • A category of data that can be added to an element, for example, Title, Body, Comment body, Tags, Image.
  • Field type. 
    • The data type of a field, for example, text, integer, image.
  • Field instance. 
    • A field added to an element

Field UI

Field UI: add field

Field UI: default types

What type of data the field will store
Each field can store one type of data (text, number, file, etc.).

When you define a field, you choose a particular field type, which corresponds to the type of data you want to store.

The field type cannot be changed after you have created the field.

Field UI: add

Machine name is the unique name of the field, all Drupal entities have a machine name. This process is automatic, but can be manually altered.

Can't be changed later.

Field UI: add - settings

Depends on the type.

F.e.: Image has a lot more settings. 

Field UI: re-use

Sometimes different content types will use very similar fields. If you are sure that the field and its use will be the same for both content-types, than you can re-use existing fields.

 

This is a very good practise for maintainability.

 

For example you can use the same Description field on a few content-types and then have a single template in your theme to change the output.

Field UI: re-use

Exercise

Adding fields

Exercise

  1. Add the following fields to CT Course:
    • Teaser image (image)
    • Teaser text (long text, formatted)
    • Description (long text, formatted)
    • Location (text plain)
    • Contact email (email)
  2. Remove the Body field
  3. Order these fields in a logic order through form display
  4. Update the Full content & Teaser view modes to only display relevant fields
  5. Update/Add content!

Views

What is a view?

The views module allows administrators and site designers to create, manage, and display lists of content.

 

Each list managed by the views module is known as a "view", and the output of a view is known as a "display".

 

Displays are provided in either block or page form, and a single view may have multiple displays.

Managing views

Adding a view

Adding a view

When you add a view, consider this screen a quick setup wizard.

 

By making some basic choices, you can easily create a simple view.

 

Later on you can customise this completely.

Adding a view: block/page

Adding a view: formats

default drupal html grid, rather basic

<ul><li>node</li><ul>

<table><tr><td>

<div class="views-row">

view mode teaser

view mode full content

field: title

field: title w/ link

fields: all fields

All of these can be changed & customized later

Editing a view

Editing a view: preview

This does not use your front-ends css/js! Go to the view page for that.

Exercise

Add a view: Courses

Exercise

  1. Create a View Page: Courses
  2. Set it up to display
    • Content type Courses
    • Grid showing teasers
    • 12 items
    • with pager
  3. Set the page url to /courses
  4. Verify your view shows all courses
    • Make sure there is enough content!

Relationships

Use cases & setting up

Use case: CT Course

We want to add a new content type called Course. Each Course contains field to describe a school course. It has a Name (title) and a Description (body).

 

We want to link our Teachers to a Course, so that we can see which Teacher gives what Course.

 

Meet the reference field.

First: create the CT

Create a new Content type called Teacher.


For settings:

  • Publishing options -> leave only published on
  • Display settings -> dont display
  • Menu settings -> none


This content type has (by default) a title, and a body field.

Add a reference field

Add a reference field

Create some courses

Teacher field in action

Result

Reference field: taxonomy

Works the same way as a Reference field: content, except that it links to a specific/multiple taxonomies.

 

Taxonomies are managed under structure/taxonomy

 

Taxonomies (aka vocabulary) are basically lists of items, usually used for categorisation, tagging, etc

 

There are cases where the administrator manages them, but these can be also be setup to be freely added by users 

Taxonomy: add/edit

Add field

Edit field settings

Exercise

Add taxonomy: department

Exercise

  1. Create a new taxonomy: Campus 
    • Add some items
  2. Add a new field to CT Course:
    • Add a taxonomy reference to the new Taxonomy Campus
    • Limit to 1
    • Required
  3. Update your form display & view modes
    • Set form display to Selectbox
    • Show field (w/ link) on Teaser & Full content
  4. Update your content
    • Verify everything is showing 

User management

User management

One of the great features of Drupal is the ability to control how and what people can access on your site.

 

You can set permissions for these "users" to define who can do what for Drupal core features and contributed modules.

 

For example, you probably won't want casual visitors to edit your homepage. However, the site owner or trusted user should be able to do so.

Users: how to

Users: Roles

Users: Permissions

Exercise

Add user role: Webmaster

Add user role: Webmaster

Add a new role Webmaster & set permissions.

 

This user needs to be able to:

  • Use the Admin interface
  • Access files
  • Add/Edit/Remove content
  • Use Basic/Full html
  • Create/Edit URL aliases
  • Use/Change shortcuts
  • Change menus & items
  • Use the toolbar

Add user role: Webmaster

Test this user!

 

Make sure you can do all of the actions listed before!

 

Protip: use a second browser or incognito window

Made with Slides.com