Drupal

Translated from German using DeepL and ChatGPT.

Date: January 2022
Reading Time: 16 Minutes

Since the beginning of this year, I have been working with Drupal. In this blog post, I will explain the basics of Drupal.

About Drupal

Drupal is a so-called "web content management system." It is written in PHP and is licensed under the GNU license. Drupal is therefore free software.
The use is free, and the source code is publicly available.
Such a CMS is used to manage a website and its content with simple building blocks.

Links

Information

Developer: Drupal Community
Size: 140 MB
Languages: PHP, JS, CSS, HTML, YML, TWIG, SQL, ...

Versions

It is recommended to always use the latest version. Older releases are considered critical and are usually no longer supported.
Current versions can be found on the Drupal page (opens in a new tab).

CMS

As mentioned, Drupal is a CMS. But what is a CMS?
CMS stands for "Content Management System." In the frontend, data is displayed to the user. In the backend, the content of the website can be modified. Here's an example:
Max Mustermann is the owner of a news company and wants to publish articles every day. He can use a CMS for this. His editors can create these media without programming knowledge.
The consumer, however, only sees the website and its content.

In a CMS, there are three types.

Coupled

In the traditional variant, the backend and frontend are tightly connected. The content is created, stored, and managed in the backend. The frontend then displays it.

Hybrid

The decoupled CMS is a combination of the other two variants. There is still a frontend that displays the page. However, such a CMS also provides an API that can then be used by a framework.
Example: The Drupal site provides data via the API, which is then displayed using React components.

Headless

Here, the backend still serves as a data storage. However, there is no frontend. The data is accessible via an API.

Users

Here, I have gathered three companies that are known to use Drupal.

Company	URL	Image
Tesla	https://www.tesla.com/ (opens in a new tab)
NCAA	https://www.ncaa.com/ (opens in a new tab)
NASA	https://www.nasa.gov/ (opens in a new tab)

Alternatives

To analyze the advantages and disadvantages of Drupal, I first looked at what alternative solutions are available.

Logo	CMS	Description	Website
	Contao	Cantao is free and intended for medium to large websites.	https://contao.org/en/ (opens in a new tab)
	Redaxo	Due to its open architecture, Redaxo can be used in a variety of ways. This CMS is suitable for both small and large, complex portals.	https://redaxo.org/ (opens in a new tab)
	Wordpress	This is probably the most well-known and popular variant. Wordpress offers a plugin architecture and a template system. This allows content to be published quickly and inexpensively.	https://wordpress.com/ (opens in a new tab)
	Joomla	Joomla claims that no programming language knowledge is required.	https://www.joomla.ch (opens in a new tab)
	Shopify	The name already suggests that this is a shop system. For a blog, this would not be the best choice.	https://www.shopify.de (opens in a new tab)
	Magento	Magento is also a software for online shops.	https://magento.com/de (opens in a new tab)
	TYPO3	Behind this open-source system is a large community. The CMS is free and scalable.	https://typo3.org/ (opens in a new tab)
	Webflow	The American company stands out with its visual online editor platform.	https://webflow.com (opens in a new tab)

Advantages of Drupal

Disadvantages of Drupal

• Some knowledge is required to make adjustments.
• It can be too complex for beginners due to its many features.

Setup

https://www.drupal.org/docs/installing-drupal (opens in a new tab)

1 - Preparation

MAMP

To perform the Drupal installation, a web server and a database are required.
For this, you can install MAMP (opens in a new tab).

Composer

Composer is the package manager for PHP.
It ensures that all developers have the correct packages and versions.

Whether you are generating a project, installing modules and themes, or updating packages, Composer makes life easier.

Installation

To install Composer, execute the following commands.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') ===
'906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo
'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

You can then run the package manager in the console with vendor/bin/composer.

.bash_profile

It can be a bit tedious if you always have to enter the entire path in order to use Composer. To avoid this, you can add the following line to the following line into the .bash_profile file.

export PATH="$HOME/.composer/vendor/bin:$PATH"

Usage

Packages can then be installed as follows.

composer require --dev drupal/twig_xdebug

There are packages that help you debug the app or carry out tests. These can be installed with --dev. This defines that they are only used locally.

composer.json

This file shows which packages are installed. This means that the packages do not all have to be uploaded to Git. You simply upload the composer.json. If someone now clones the project, they can install all the required packages with Composer.

The version of a package can be specified in various ways.

composer.lock

The exact version of a package is saved here.
This file is created automatically when the first package is installed.

Node

As you can see, the structure is identical to Node.

2 - Create database

Now you have to create a database.
After you have started MAMP, you can do this in phpMyAdmin.

3 - Install

Once you are prepared, you can install Drupal in the htdocs folder.
As described above, you can now create the project with Composer.

composer create-project drupal/recommended-project my_site_name_dir

Alternatively, this can also be done via the download link (opens in a new tab).

4 - Set up

Once you have downloaded the project, you can set it up using the installer.
This installer can be accessed at: http://localhost:/[port][pathFromHtdocsToProject]/web

For the database, it is particularly important that you enter the correct data.
This can be found in phpMyAdmin.

You can then complete the installation.

**At this point, the Drupal start page should be visible.

If you are logged in with the user you have just created, you will see a navigation bar. This can be used to provide content.

If you are not logged in, the page looks like this.

4 - MySql

A few commands, which I will explain later, require the mysql package. This can be downloaded with Brew (opens in a new tab).

brew install mysql

I have noticed that there can be problems with the DB by default. Therefore it is recommended to make a small adjustment in the settings.php file. Line 6: localhost 127.0.0.1

$databases['default']['default'] = array (
	'database' => 'drupal9',
	'username' => 'root',
	'password' => 'root',
	'prefix' => '',
	'host' => '127.0.0.1',
	'port' => '8889',
	'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
	'driver' => 'mysql',
);
$settings['config_sync_directory'] = 'sites/default/files
/config_LZk745V7Vag6RroL6CpjgLBEjqVmJvjCtFiMMpITtLvF00Y-WWgPRXZ5VCO5hqBXK2UuPJ3b2w/sync';
 

5 - Configure

To use the full potential of Drupal, you should install and configure a few things.

Admin Toolbar

In my opinion, you should use this module. It offers two huge advantages in development:

• The nested links are more accessible
• The cache can be cleared quickly

The Toolbar (opens in a new tab) can be installed directly with Composer.

composer require drupal/admin_toolbar

It is important that you activate it afterwards.

Drupal Console

The Drupal Console (opens in a new tab) offers useful commands.

composer require drupal/console:~1.0 \
--prefer-dist \
--optimize-autoloader \
--sort-packages \
--no-update
 
composer update

Eine Liste der Commands findet man hier: https://drupalconsole.com/docs/en/commands/ (opens in a new tab)

Drush

Drush (opens in a new tab)is also helpful for getting things done quickly in the console. The application can control, manipulate and administer Drupal pages. administer Drupal pages.

composer require drush/drush

There is also documentation on the useful commands here: https://www.drush.org/latest/commands/all/ (opens in a new tab)

Example

If you want to create 10 new users, this takes time. With Drush, this is done within a few seconds.

vendor/bin/drush devel-generate-users 10

.bashrc

To be able to run Drush and Drupal without the vendor/bin path, you have to create a .bashrc file in the root.
You then define 2 aliases in it.

alias drush='vendor/bin/drush'
alias drupal='vendor/bin/drupal'

To benefit from this configuration, you still need to activate it.

source .bashrc

Usage

In this section I will show you what you can do with Drupal.

Content

You can add content here. This depends on the defined content types.

For example, you can create an article. The data it contains and how it is displayed to the creators and viewers is defined in the background. is displayed.

In Drupal you can already comment under content by default. These comments can be managed in this area. Here you can see information about all existing files on the page.

Structure

All data is managed under Structure.
You can usually switch between 4 tabs.

Edit

Here you can edit the name, the description and specify the desired options.

Manage fields

Under this tab you can define the fields/data of a content type.

In this case, I have added a shoe. This has various fields that may/must be used when creating a shoe page.
You can see these fields under Manage fields.

Manage form display

Here you can determine how the input form looks for an author.

You can also install modules that allow you to group data.

Manage display

When something is displayed on the page, this is done according to these rules.
In this area you can see the regions and their content.
A block is part of a layout and has content. Blocks can, for example

• Show which page you are on
• Display a navigation
• Show which users are currently online
• ...

This block can then be placed in the regions. The theme describes where the regions are located.

The section Custom Theme describes in more detail how to define such regions.

Drupal offers the possibility to comment on the website.
You can add comment types under Comment types.
Example: A sneaker should be provided with a rating.

You can then filter the comments by type in a view.
If you want to receive feedback, you can define this here.

For example, you can specify who receives the feedback and which message is displayed to the user when they send it.

A content type is a type of content. By default, there is a basic page and an article.

However, you can also add new content types.

If you want to change how the content is displayed in the frontend, you can do so here.

Here you can define how the content is displayed in different situations.

Example:
In our sneaker example, a shoe article could be visible in different places. However, it does not look the same everywhere.

• A small section on the homepage is reserved for shoes. There you can see the shoe of the day with a large picture and the title of the article. of the article.
• Under the tab 'Sneakers' you will find an overview. It shows the title, a small text and a small picture.
• If you search for a specific shoe in the search field, search suggestions are displayed. These show the name of the shoe, the author and the brand. author and the brand.

Under View mode, you can define which display options are available in the frontend. Under Content type you can then see these different modes and can customize the appearance accordingly.

This feature is mostly used for displaying images.

You can also set it up for the backend under Form mode. However, this is rarely done.
In this area, you can edit everything from the footer to the main navigation of the page.
For example, you can add a new menu item.

It should be noted here that Drupal differs from other CMSs. If you create content, it is initially only accessible via the link. It does not have to be linked afterwards, but it can be. A dish has ingredients, a movie has an age rating and a sneaker has a model. Taxonomy can be used to categorize/classify content. If I post a smoothie on my website, I could make terms out of the ingredients, such as "apple" and "kiwi". If a user then searches for a dish with a specific ingredient, filtering makes it easier for them. To create a vocabulary, the following steps are necessary:

1. enter a suitable name under add vocabulary.
2. add a field in the content type. Select taxonomy term as field type.
3. then enter a suitable label.
4. since it is a reference, you should put ref_ in front of the machine name.
5. now you have to define the permitted number of values.
6. finally, check the correct vocabulary under Reference type.

You can list content/information in views. This can include taxonomy terms, comments, users or articles. When calling up of such a view, the website is queried for the criteria using SQL. The results are then displayed.

Views can be used to click together very complex queries in the backend.

Appearance

A theme specifies how the data is displayed. A theme can be used to change the appearance of a website.
You can imagine that this is the layer between the content and what the user sees.
A theme therefore determines the layout and design.

There are two languages that you should know for theming.

YAML is a readable language that is often used for configuration files.
Twig is a template engine for PHP. It keeps logic and presentation apart.

Documentation: https://twig.symfony.com/doc/3.x/ (opens in a new tab)

Syntax

There are three different ways to use Twig.

Inheritance

Parts of the code can also be inherited using Twig.

Add classes

<h1{{ title_attributes.addClass("page-title") }}>{{ title }}</h1>

This line leads to the following HTML code.

<h1 class="page-title">Page</h1>

Array and objects

Normally you get to elements of arrays or objects with a ..

{{ variable.1 }}
{{ page.sidebar_right }}

However, if special characters are used, the data must be accessed in a different way.

{{ variable['#key'] }}
{{ variable['hyphenated-key'] }}

A theme can be installed with Drush, manually via the download link or with the Composer.

composer require drupal/themename

The theme must then be activated under Appearance.

All themes can be found on this page: https://www.drupal.org/project/project_theme (opens in a new tab)

Setup

Before you start theming, it is advisable to configure the environment for this.
If you comment out this code block, the settings.local.php file is taken into account:

if (file_exists(__DIR__ . '/settings.local.php')) {
	include __DIR__ . '/settings.local.php';
}

Then you have to copy the file sites/example.settings.local.php to sites/default/settings.local.php.

This code block must be commented out so that Dupal takes the changed template files into account and does not simply fetch the data from the cache:

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Later you have to activate the Twig debugging options:

parameters:
	http.response.debug_cacheability_headers: true
	twig.config:
		debug: true
		auto_reload: true
		cache: false
services:
	cache.backend.null:
		class: Drupal\Core\Cache\NullBackendFactory

If everything has worked, you should look at the following comments in the source code that is visible in the browser.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html' -->
<!-- FILE NAME SUGGESTIONS:
	* html--node--2.html.twig
	* html--node--%.html.twig
	* html--node.html.twig
	x html.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/layout/html.html.twig' -->

These steps are described in more detail in the following instructions: https://drupalize.me/tutorial/configure-your-environment-theme-development?p=2512 (opens in a new tab)

Location

Here is a brief overview of where to find files relating to the themes.

Structure

A theme folder can look like this.

These are the uses of the various files.

Regions

Regions can be implemented as follows.

1. define regions in the info.yml file
2. use the region in the page template file
3. add blocks to the regions

If no themes are defined, Drupal uses the default regions.

Further instructions on regions:

• https://drupalize.me/tutorial/exercise-create-new-theme?p=3291 (opens in a new tab)
• https://drupalize.me/tutorial/adding-regions-theme?p=3291 (opens in a new tab)

An asset library is a CSS or JavaScript bundle to provide a style and functionality for a specific component.

This is how a library can be defined.
You simply specify which files you want to bundle together.

global:
	css:
		theme:
		css/global.css: {}
	js:
		theme:
		js/logic.js: {}

If you then want to use this bundle, you can integrate it. This automatically gives you the logic and styles that have been defined.

libraries:
	- mytheme/global

Template files are used to generate the markup. In such a file you write HTML markup and use the Twig syntax. Therefore such a file ends with .html.twig.

Drupal then takes the most specific file.

This is what a template file from Bartik looks like.

<div id="page-wrapper">
	<div id="page">
		<header id="header" class="header" role="banner">
			<div class="section layout-container clearfix">
				{{ page.secondary_menu }}
				{{ page.header }}
				{{ page.primary_menu }}
			</div>
		</header>
 
		{% if page.highlighted %}
			<div class="highlighted">
				<aside class="layout-container section clearfix" role="complementary">
					{{ page.highlighted }}
				</aside>
			</div>
		{% endif %}
 
		{% if page.featured_top %}
			<div class="featured-top">
				<aside class="featured-top__inner section layout-container clearfix" role="complementary">
					{{ page.featured_top }}
				</aside>
			</div>
		{% endif %}
 
		<div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
			<div id="main" class="layout-main clearfix">
				{{ page.breadcrumb }}
				<main id="content" class="column main-content" role="main">
					<section class="section">
						<a id="main-content" tabindex="-1"></a>
						{{ page.content }}
					</section>
				</main>
 
				{% if page.sidebar_first %}
					<div id="sidebar-first" class="column sidebar">
						<aside class="section" role="complementary">
							{{ page.sidebar_first }}
						</aside>
					</div>
				{% endif %}
 
				{% if page.sidebar_second %}
					<div id="sidebar-second" class="column sidebar">
						<aside class="section" role="complementary">
							{{ page.sidebar_second }}
						</aside>
					</div>
				{% endif %}
			</div>
		</div>
 
		{% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
			<div class="featured-bottom">
				<aside class="layout-container clearfix" role="complementary">
					{{ page.featured_bottom_first }}
					{{ page.featured_bottom_second }}
					{{ page.featured_bottom_third }}
				</aside>
			</div>
		{% endif %}
 
		<footer class="site-footer">
			<div class="layout-container">
				{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
					<div class="site-footer__top clearfix">
						{{ page.footer_first }}
						{{ page.footer_second }}
						{{ page.footer_third }}
						{{ page.footer_fourth }}
					</div>
				{% endif %}
				{% if page.footer_fifth %}
					<div class="site-footer__bottom">
						{{ page.footer_fifth }}
					</div>
				{% endif %}
			</div>
		</footer>
	</div>
</div>

If you have carried out the theming setup correctly, you can see in the browser how the elements can be displayed using the themes.

Extend

You can add modules in the Extend tab. These can be installed like themes.
A module is comparable to a node package. It offers functions that can be used after activation.

Example:
You want to use a color picker on the page.
To do this, first visit the Drupal page (opens in a new tab) and search for a module.

Preprocess functions allow variables to be changed before they are used in the template files. A more detailed description would go beyond the scope here. However, I recommend reading this description: https://drupalize.me/tutorial/what-are-preprocess-functions?p=2512 (opens in a new tab)

Configuration

Whether you want to generate content, manage people or change the time zone ... you can carry out all general configurations here.

People

In this tab you can add users and manage rights and roles.

Reports

Errors and reports can be found here.

Conclusion

I am surprised how quickly you can create a powerful site with Drupal.