The purpose of this training page is to train you in how to create a Drupal module. This will greatly help you understand how Drupal works and especially regarding how modules work. Since Drupal is built on modules this is vital for understanding how Drupal works "under the hood."

From Drupal.Org

Drupal has a good set of webpages that gives you a good quick start into building a module. It is also a good reference.

https://www.drupal.org/docs/creating-modules/getting-started-background-prerequisites 

A Video from Acquia

Acquia is a company that is foundational in the Drupal community. The owner of the company which does a lot of website hosting is also the creator of Drupal. As such, it is in his best interest to spread the love of Drupal. As part of that they have created a very good series of training videos. Below is a link to the first of the module training courses.

https://www.youtube.com/playlist?list=PLpVC00PAQQxFNDfiXn6LH1gOLllGS3hhl

The Page Call Process video is misloaded. It is a duplicate of the Services and the Services Container in Drupal video. Hopefully they will catch that and reload the Page video. 

Where to Build

Please go and build your training module on Devthefuture.com. Follow his instructions and then as you wish build your own module. Experiment and grow. 

Process

Create the module folder 

• Go into the code for the webstie via code . and create the folder which will be the machine name of your module. (This page has some rules for naming)
• This folder should reside under web > modules > custom (create the custom folder if it is not already there). 

Create the info.yml file

• The info.yml file holds the basic information for your module.
• This file resides directly within your new module folder. 
• You can reference this page on what to put in your info.yml, and see the example below.

• "block" is listed as a dependency because Jimbo Module needs the block module in order to make a nice little block.

Create the Block

• We are now following the procedure in this video (after they create the .info.yml).
• Create the following rabbit hole of folders, creating the first directly under your module folder > src > Plugin > Block
• Within the Block folder, create your block .php file. It can be named however you want, but I would not recommend using a space.
• Here is a screenshot of the completed block file from the video:

• Note that the class name is the exact name of the .php file. This must be true in order for the class to function properly.
• Pay attention to commas and semicolons here... you will regret it otherwise. 

Test Out Your Module!

• Make sure to change all of your changes to the code, and push them to the master repository via ahoy sendup "message"
• Either use ahoy dbcc dev or manually flush the cache on the site.
   
• In the admin toolbar, click on Extend, search for your module, and install it.
• To make the block appear on a page, go to Structure > Block layout, and scroll down to content
• Place your block and specify what page you want it to appear on by listing the node in the Pages text box. ex) /node/22
• This node id can found by hovering over the edit button on your page of choice, and reading the url in the bottom left of the window.
   
• After placing your block, check your page; you should find it at the bottom, containing the markup you specified in the block file. 
• If you are not seeing your block, double-check your code, starting with the block .php file. Refer to this page (#troubleshooting) for more troubleshooting tips
• Also check the out Reports > Recent log messages as there may be a useful php error to help guide your search. 

Add CSS

• We are now following some of the steps from this page
• The first thing is to create a folder titled "css" within your module folder, and create a .css file for later use (title it whatever you would like)
• Next, create a libraries.yml file in your module folder.This should have the same name as the info.yml file, but replace "info" with "libraries".
• Inside, you will want to have something like this:

• The name of the library is at the start of the file ("jimbo" in this case). You will use this name later.
• You can specify what version your module is at and, more importantly, point to some css or js (javascript) files.
• Under theme, point to the css file you made earlier. You do not need to make any js folders or files for now, but you can make the pointer for that whether that file exists or not.
• To edit the css for your specific block, find your block on your page, and inspect it to see what classes it has. Find the class that is specific to your block, and use that class to style it (see example below)
• You can now style your css file however you like. But make sure your block looks really cool. Here's an example of Eli's css file for his block -- his looks pretty cool

Attach CSS

• Now you need to add some code to your block file (.php) in order to attach your library (with the css) to the block.
• You do not need to know exactly how this code works--only that it does
• Instructions to do this are here under "Attaching to a render array of a Block Plugin"

• Here is my completed .php file for reference. Again, pay close attention to syntax. 
• the path to your library should be module_folder/library, using the library name at the top of your .libraries file.

Finale

• Save all changes and push to the master repository. 
• Clear chace and check out your super cool module
• If the css is not appearing, check recent log messages, and go look for syntax mistakes.
• Make changes to your css as wanted, and make sure to git pull before attempting to push each time.
• If applicable, deploy the code to the test and live environments, and install your module and place your block on the live site. 
• Congrats! You have made your very own module, and used it to show a syled block!