Regardless of you being a seasoned web developer or someone who is just about to start learning Drupal, there are few things that everybody needs to have in place before we can get started:
First, is to make sure that we have an Application stack that will meet Drupal 8's system requirements. MAMP provides us with a standalone web server that is generally referred to as an AMP (Apache, MySQL, PHP) stack and is available for both OS X and Windows. We will look at installing and configuring this local web server in preparation to install Drupal 8.
Second, is to set up a Drupal 8 instance and learn the process of installing Drupal instances into our AMP stack. There are a few changes on how the configuration and installation processes work in Drupal 8, so we will take a closer look to ensure that we all begin development from the same starting point.
Third, we will be reviewing the Admin interface, including the new responsive Admin menu and any configuration changes that have been made as we navigate to familiar sections of our site. We will also look at how to extend our website using contributed modules, review changes to the files and folder structure that make up Drupal 8, and discuss best practices to manage your files.
Finally, we will review the exercise files that we will be using throughout the series, including how to download and extract files, how to use phpMyAdmin—a database administration tool to back up and restore database snapshots—and how to inspect elements within our HTML structure using Google Chrome.
Let's get started by installing our web environment that we will be using as we take an exciting look at Drupal 8 theming with Twig.
To install and run Drupal 8, our server environment must meet and pass certain requirements. These requirements include a web server (Apache, NGINX, or Microsoft IIS) that can process server-side languages such as PHP, which Drupal 8 is built on.
Our server should also contain a database that can manage the data and content that Drupal 8's content management system will store and process. The preferred database is MySQL. However, Drupal 8 can also support PostgreSQL along with Microsoft SQL Server and Oracle with an additional module support.
Finally, Drupal 8 requires PHP 5.5.9 or later, with the CURL extension.
However, because this book is not meant to be a "How-to" on installing and configuring Apache, MySQL, or PHP, we will take all the guesswork and trial by fire out of the equation and instead turn to MAMP.
MAMP can be found at https://www.mamp.info/en and is a tool that allows us to create Drupal sites locally without the need or knowledge of installing and configuring Apache, MySQL, or PHP on a specific platform.
The application stack will consist of the following:
Apache: The world's most popular web server
MySQL: The world's most popular database server
PHP: Various versions of PHP
phpMyAdmin: A tool to manage MySQL databases via your browser
Let's begin with the steps involved in quickly downloading, installing, and configuring our very own AMP stack along with an initial instance of Drupal that we will be using throughout the rest of this book. Begin by opening up our web browser and navigating to https://www.mamp.info/en/downloads and selecting either Mac OS X or Windows and then clicking on the Download button, as shown in the following image:
Once the download has completed, we will need to locate the
.dmg (Mac users) or
.exe (Windows users) installation file and double-click on it to begin the installation process. Once the executable is opened, we will be presented with a splash screen that will guide us through the process of installing and configuring MAMP.
Clicking on the Continue button located on the Introduction pane, will take us to the Read Me information. MAMP will notify us that two folders will be created: one for MAMP and the other for MAMP PRO. It is important to not move or rename these two folders.
Click on the Continue button, which will take us to the license information. Simply accept the terms of the license agreement by clicking on Continue and then on Agree when prompted.
We can finally click on the Install button to complete the installation process. Depending on the operating system, we may need to enter our credentials for MAMP to be able to continue and configure our local web server. Once the install has completed, we can click on the Close button.
When we first open up MAMP, we will be prompted to launch either MAMP or MAMP PRO, as shown in the following image:
While MAMP is the free version of the local web server, it is strongly recommended that we use MAMP PRO for configuration and easy setup of a website. We can continue by clicking on Launch MAMP PRO, which will prompt us one more time to accept the Initialization of the remaining components that MAMP PRO needs before we can begin using it. Now, click on OK to continue.
If this is the first time you're using MAMP PRO, then there is some quick housekeeping we will want to take care of, beginning with the general settings. MAMP PRO tries to make sure that it does not interfere with any other possible web servers we may be running by setting the default ports of Apache to 8888 and MySQL to 8889. Although this is nice, the recommendation is to click on the Set ports to 80, 443 & 3306 button that will make sure that MAMP PRO is running on more standardized ports for web development.
If we want to make sure that Apache or MySQL are active at all time, we will also check Start Apache and MySQL on system startup and uncheck Stop Apache and MySQL when quitting MAMP PRO. Once we have made these changes, we can click on the Save button. Our changes should now be applied as shown in the following image and MAMP PRO will now prompt us to Start servers now.
The next tab we will look at is the Hosts tab, which is where we will create and configure basic websites. By default, MAMP PRO creates a localhost entry for us, which is common when developing a web application.
We will be using the Hosts tab to create an additional website when we install Drupal 8, so let's take a moment to locate some of the common settings we will need to know. Take a look at the following image; we can see that localhost is the Server name of our default website, uses the default PHP version of 5.6.10, and has a Document root pointing to the htdocs folder of our MAMP installation.
Another nice ability of MAMP PRO is to be able to click on the arrow icon located to the right of the Server name and have our default web browser open up to the localhost page, as shown in the following image:
It is important to point out that the Server name always equates to the name of the URL in our browser that displays our website.
MAMP PRO is quite a robust and powerful local web server and while there are many more configuration options and settings that we could spend time looking through, most of our time will be spent on working from the Hosts tab creating new websites or configure existing sites.
So far, MAMP PRO has configured everything for us, but how to create a new website and, in more general, install a Drupal 8 instance? Let's look at it in the following section.
We will need to grab a copy of the latest Drupal 8 release and extract the files to a location on our computer that will be the document root of our website.
We will have to create a new host entry with the server name that we will want to use for our URL and point our host entry to the proper document root containing our Drupal 8 instance.
We will have to create a MySQL database that we can point Drupal to during the installation process.
We will walk through each of these steps in detail to ensure that we all have a copy of Drupal 8 installed properly that we will build upon as we work through each lesson.
Drupal.org is the authority on everything about Drupal. We will often find ourselves navigating to Drupal.org to learn more about the community, look for documentation, post questions within the support forum, or review contributed modules or themes that can help us extend Drupal's functionality. Drupal.org is also the place where we can locate and download the latest release of Drupal 8.
We can begin by navigating to https://www.drupal.org/node/2627402 and locate the latest release of Drupal 8. Click on the compressed version of Drupal 8 that we prefer, which will begin downloading the files to our computer. Once we have a copy of Drupal 8 on our computer, we will want to extract the contents to a location where we can easily work with Drupal and its folders and files.
A document root is the main folder that our host entry will point to. In the case of Drupal, this will be the extracted root folder of Drupal itself. Generally, it is a best practice to maintain some sort of folder structure that is easy to manage and that can contain multiple websites.
We will have to change the Server name from the default to
Then, we will want to verify that the required version of PHP is being used; in our case, the default of 5.6.10 will work just fine.
Finally, we will need to click on the folder icon within the Document root section and choose our Drupal 8 folder that we placed within our
sitesfolder earlier from the Please select a Document Root folder dialog.
The General settings for our new host entry should look as shown in the following image:
Drupal 8 requires a database available to install any tables that make up the content management system. These tables will hold configuration data, users and permissions, content, and any extendable functionality that makes Drupal 8 so powerful.
Lucky for us, MAMP PRO installs a MySQL database server that we can take advantage of to create a new database that Drupal 8 can point to. This same database server we will also be working with to back up and restore our database content as we progress through each lesson.
MAMP PRO also installs a free software tool written in PHP for the sole purpose of managing MySQL databases. phpMyAdmin allows us to perform a multitude of tasks from browsing tables, views, fields, and indexes to exporting and importing database backups and much more.
If we switch back over to MAMP PRO, we can locate the MySQL tab and click on the phpMyAdmin link located in the Administer MySQL with region, as shown in the following image:
We should now be presented with phpMyAdmin within our browser. Currently, we are interested in creating a new database. We will revisit phpMyAdmin a little later to learn how to back up and restore our database. The following are the steps to create a database:
We have now created our first MySQL database, which we will use when configuring Drupal 8 in the next step.
Now that we have all of our basic requirements completed, we can open up our favorite web browser and navigate to http://drupal8/core/install.php to begin the installation process.
Since this may be the first time installing Drupal 8, one thing we will notice is that the install screen looks a little different. The install screen has been given a makeover, but the steps are similar to that of Drupal 7, starting with choosing a language.
The installation process will prompt us to choose a language that we want Drupal 8 to be installed in. This language will control how the Admin area appears, and in many cases, the default of English is acceptable. We will need to click on the Save and continue button to proceed to the next step, as shown in the following image:
Our next step is to choose an installation profile. We can think of this as Drupal's way of preconfiguring items for us that will make our job easier when developing. By default, we can leave the Standard profile selected, but if we choose to configure Drupal ourselves, we can always choose Minimal. Click on the Save and continue button to proceed to the next step, as shown in the following image:
The requirements review can also alert us to any configuration settings that will allow Drupal to perform better. In our example, we forgot to enable OPcode caching, which allows PHP to compile down to bytecode. Without going into the details of caching, we can easily enable this feature in MAMP PRO.
Click on the Save button and then allow MAMP PRO to restart servers if prompted. Now, we can refresh our Drupal install in the browser, and we will be taken to the next step in the installation process.
Database configuration can sometimes be a tricky part of installing Drupal for the first time. This is generally due to selecting the incorrect database type, wrong database name, or password, or by not specifying the correct host or port number.
The settings we will want to use are as follows:
Database type: Leave the default of MySQL selected.
Database name: This is the name of the database that was created upon import. In our case, it should be
With these settings, we can click on the Save and continue button to proceed.
If this is successful, we can see the Installing Drupal screen and watch as Drupal installs the various modules and configurations. This process may take a few minutes. If this process fails in any way, please go back and review the previous steps to make sure that they match what we have used.
Before we can wrap up our Drupal 8 installation, we need to configure our site by inputting various settings for site information, site maintenance account, regional settings, and update notifications. Let's proceed now by entering our Site Information.
Site name: To be consistent, let's call our site
drupal8. We may give our new site any name that we like. As usual, we can change the site name later from the Drupal admin.
Site e-mail address: Enter an e-mail address that we will want to use for automated e-mails such as registration information. It is the best practice to use an e-mail that ends in our site's domain to prevent e-mails from being flagged as spam.
Next, we will want to set up the site maintenance account. This is the primary account used to manage Drupal to perform such tasks as updating the core instance, module updates, and any development that needs user 1 permissions.
Username: Because we are developing a demo site, it makes sense to generally use
adminfor the username. Feel free to choose whatever is easy to remember, but don't forget it.
Password: Security sticklers will ask to create something strong and unique, and Drupal displays a visual interface to let us know how strong our password is. For the sake of demonstration, we will use
adminas our password so that your username and password match and are easy to remember.
E-mail address: Generally, using the same e-mail that is used for the site e-mail address makes for consistency but is not required as we can choose any e-mail that we don't mind receiving security and module update notices.
Regional settings consist of default country and default time zone. These are often neglected and left with their defaults. The defaults are not recommended, as they are important in the development and design of Drupal 8 websites, specifically, when it comes to dates and how they are used to capture data and display dates back to the end user.
At last, we have come to our final set of configurations. Update notifications should always be left-checked unless we have no reason to receive security updates to Drupal core or module updates. By default, they should be checked. Click on Save and continue to finalize the configuration and installation of Drupal 8.
Drupal installation is now complete, and we should see the home page of our new website. Say "hello" to Drupal 8.
Our local instance of Drupal 8 is similar to Drupal 7 when first viewing the site. You will note the default Bartik theme with the friendly Drupal drop logo and a tabbed main menu. It is here though where the similarities stop. Drupal 8 has been reworked from the ground up, including a brand new responsive layout and admin menu.
One of the nice new features of Drupal 8 is the rebuilt admin menu. Everything has been moved under the Manage menu item. The admin menu itself is responsive and will change from text and icon to icon only, as soon as the browser is resized to tablet screen size.
The flexibility of the new admin menu enables the admin user to manage Drupal 8 websites from the browser or a tablet or a smartphone very easily.
Taking a closer look at the menu items contained in our admin menu, we begin to see some differences in how things are named and may wonder where to find once familiar settings and configurations. Let's quickly walk through these menu items now so that it is easier to find things as we progress later on in future chapters:
Content: This section displays any user-generated content, comments, and files with the ability to filter by Published status, Type, Title, and Language. The display for content is also now a view and can be customized with additional fields and filters as needed.
Structure: This section is to manage Block layout, Comment types, Contact forms, Content types, Display modes, Menus, Taxonomy, and Views. We will explore some of the changes and new functionality contained within this section later on in the book.
Extend: Formerly known as Modules, this section is for listing, updating, and uninstalling core, custom, and contributed modules. New is the ability to search for modules using a filter. Various contributed modules have been moved into core, including Views and CKEditor.
Configuration: This section is designed to configure both core and contributed modules. Each area is grouped into functional sections and allows us to manage site information to file system to performance tuning.
Reports: This section is designed to view available updates, recent log messages, field lists, status reports, top "access denied" errors, top "page not found" errors, top search phrases, and View plugins.
Help: This section is designed to obtain helpful information on functionality necessary to know in administering a Drupal 8 website. This includes a Getting Started section and help topics on items, such as Block, Views, User, and more.
There are several changes to Drupal 8 with regard to how files and folders are structured. Let's walk through the
themes folders and discuss some best practices for how each of these folders should be managed when creating a Drupal 8 website.
One of the first things to point out is that the files and folder structure of Drupal 8 have changed from its predecessor Drupal 7. The first change is that everything that Drupal 8 needs to run is contained within the new
core folder. No longer is there any confusion of having the
themes folders contained within a
sites folder and having to ask "did I place my files in the correct location?".
assets: Various external libraries used by core (jquery, modernizr, backbone, and others)
config: It contains misc configuration for installation and database schema
includes: It contains files and folders related to the functionality of Drupal
lib: Drupal core classes
modules: Drupal core modules and Twig templates
profiles: Installation profiles
scripts: Various CLI scripts
tests: Drupal core tests
themes: Drupal core themes
While a lot of functionality, which was generally contained in a contributed module, has been moved into the core instance of Drupal 8, you will still find yourself needing to extend Drupal. Previously, you would locate a contributed module, download it, and then extract its contents into your
sites/all/modules folder so that Drupal could then use it.
Contributed and custom modules are now placed into the
modules folder, which is no longer contained inside your
Best practices are to create a few subdirectories inside the
modules folder for contributed modules—the modules built by third parties that we will use to extend your project, such as
custom, for the modules that we create on a per project basis. We will also occasionally find ourselves with a
features folder if we plan to use the Features module to break out functionality that needs to be managed in code for purposes of migrating it easily to development, staging, and production instances of our website.
Finally, we have the
themes folder. So, why don't we see the default themes that Drupal generally ships with inside this folder? That is because Drupal's default themes now are contained within the
core folder. Finally, we will actually use the
themes folder to place our custom or contributed themes inside it for use by Drupal.
As we work through each chapter of the book, we will be using exercise files that contain examples of how each page will be themed is laid out. This will include database snapshots, HTML, CSS, and images for our Home, About, Portfolio, Blog, and Contact pages. Before we begin using these files, we need to know where to download them from and the best location to extract them to for future use.
We can find the exercise files at https://www.packtpub.com/support. Click on the download link and save the compressed file to the desktop. Once the download is finished, we will need to extract the contents. Let's take a quick look at what we have:
Mockupfolder that contains the finished HTML version of our theme
A database snapshot contained within various chapter folders that we will use to restore on top of our current Drupal instance to ensure that we always have the same configuration at specific points along the way
Since we will be working with database snapshots at various points, we will want to look at how we can manage these files using the MySQL database tool named phpMyAdmin.
It is important to know how to backup our database when working in Drupal 8 as most of our content and configurations are contained within a database. Make sure that phpMyAdmin is open in the browser.
Next, we will want to make sure that any database exports are saved as a file versus just plain SQL script. Because this is a global setting, we will need to make sure that we have not selected any specific database. We can make sure that we are affecting global settings by clicking on the house icon in the left-hand sidebar underneath the phpMyAdmin logo. Next, we can navigate to Settings and then Export, as shown in the following image:
One little gotcha when using phpMyAdmin is making sure that when we create our database export, we ensure that the SQL also drops any tables before trying to recreate them when we do the import later.
drupal8database from the left sidebar.
Click on the Export tab.
Select Custom - display all possible options as our export method.
Select SQL as our format.
Choose Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement from Object creation options.
Click on the Go button.
Restoring a database is simpler than backing our database up. Except this time, we will be using an existing database snapshot that either we have taken or that we were provided to overwrite our current database files with. Let's begin by following these steps:
Click on the Import tab.
Click on the Choose File button and locate the
drupal8.sqlfile we created earlier.
Click on the Go button to begin the restoration process.
The process of restoring the file can sometimes take a minute to complete, so please be patient while the file is being restored.
While phpMyAdmin allows us to manage database operations, we can choose to use other database tools or even the command line, which is a lot faster to export and import databases.
Now that we have a good understanding of how to back up and restore our database, it's time to take a quick look at how we will be using Google Chrome to review our HTML and CSS structure within Drupal 8 and our theme Mockup.
While there are many different browsers to view web content on, Google Chrome is definitely a favorite browser when theming in Drupal. It is not only standards compliant ensuring that most HTML and CSS work properly but Chrome also allows us to inspect the HTML and CSS and preview changes "live" within the browser using the Developer Tools option.
Begin by browsing to our local Drupal 8 instance in Google Chrome and then selecting Developer Tools from the View | Developer | Developer Tools menu. The Developer Tools will open up in the bottom of your browser, as shown in the following image:
There are several tools available for our use, but the one we will use the most is inspecting Elements on the page, which allows us to view the HTML structure and any CSS being applied to that element from the Elements and Styles panels. We can navigate through the HTML structure, or if we prefer to isolate an element on the page, we can place our cursor on that element and right-click to open up a context menu where we can select Inspect. Doing so will target that element in the Elements pane for us.
As we dive deeper into theming, we will use this set of tools to help preview changes as well as isolate any issue we may be experiencing as our HTML structure changes based on what Drupal 8 outputs.
We collected a lot of information to start our series on Drupal 8 themes. Let's review exactly what we covered so far:
We successfully configured an AMP (Apache MySQL, PHP) stack by downloading and installing MAMP PRO.
We set up our first Drupal 8 instance by downloading the latest version from Drupal.org, importing the Drupal instance into our AMP stack, and completing the Drupal 8 install by choosing our language, profile, database settings, and site information.
We also had our first look at Drupal 8 and some of the new responsive functionality that it provides. We familiarized ourselves with the admin menu and the new admin interface, which included the Content, Structure, Appearance, Extend, Configuration, People, Reports, and Help sections. Having a better knowledge of Drupal 8 and its folder structure has given us insight into how to apply best practices to manage our theme and its assets.
By using the project files, we learned how to manage database snapshots through importing and exporting SQL files inside phpMyAdmin.
Finally, we learned how to use Google Chrome to inspect our HTML and CSS to have a better understanding of our theme and its markup.
In the next chapter, we will take a closer look at "theme administration" and answer the question: what is a theme? We will explore the "appearance interface" and discuss how Drupal's default themes function. Finally, we will follow up with looking closer at how to use prebuilt themes and managing content with blocks and custom block layouts.