How to Create a Drupal 8 module

In this tutorial I am going to teach you how to create a Drupal 8 module

First you need to create a folder with your module name under the modules/custom folder

Then you need to create a your_module_name.info.yml file that contain information about your module, here is a sample content

name: Commerce Amazon Slider
description: Provides custom product slider that looks and behaves like the Amazon slider
type: module
package: Commerce Custom
dependencies:
  - commerce:commerce
core: 8.x

If you navigate to YourSiteName.com/admin/modules you should find your new module listed, enable your module and follow through with the tutorial to add features to your module

To include javascript and css files in your module you need to create a yourmodulename.libraries.yml file, here is an example

commerce_amazon_slider:
  js:
    js/commerce_amazon_slider.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings
  css:
    layout:
      css/commerce_amazon_slider.css: {}

If your module will require specific permissions you can create a yourmodulename.permissions.yml file, here is an example

administer commerce_amazon_slider:
  title: 'Administer Commerce Amazon Slider'
  description: 'View, edit and update Commerce Amazon Slider configurations'

After clearing your cache, You should then see your permissions listed under YourSiteName.com/admin/people/permissions

To create a configuration form you first need to create a route for the form, you do that by adding a your_module_name.routing.yml file, here is an example

commerce_amazon_slider.configure_slider_settings:
  path: '/admin/commerce/config/commerce-amazon-slider/configure-slider-settings'
  defaults:
    _form:  '\Drupal\commerce_amazon_slider\Controller\ConfigureSliderSettingsForm'
    _title: 'Configure Amazon Slider Settings'
  requirements:
    _permission: 'administer commerce_amazon_slider'

Then you need to create the Form class under modules/custom/your_module_name/src/Controller/FormClassName.php, The file name and class name should match the entries added in your .routing.yml file, like the following example

<?php

namespace Drupal\commerce_amazon_slider\Controller;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class ConfigureSliderSettingsForm extends FormBase
{
    public function getFormId()
    {
        return 'commerce_amazon_slider_slider_settings_form';
    }

    public function buildForm(array $form, FormStateInterface $form_state)
    {
        

        return $form;
    }

    public function submitForm(array &$form, FormStateInterface $form_state)
    {
      
    }
}

To add a link to the menu for the form route, you need to create a yourmodulename.links.menu.yml file like the following example

commerce_amazon_slider.configure_slider_settings:
  title: Configure Amazon Slider Settings
  parent: commerce.store_configuration
  description: ''
  route_name: commerce_amazon_slider.configure_slider_settings
  weight: -30

After Clearing your cache, you should see your menu link listed as follows

Then to make the form functional we need to add form fields and save the data on form submit, the code will be modified as follows

public function buildForm(array $form, FormStateInterface $form_state)
{
   $form['show_on_pages'] = [
      '#type' => 'textarea',
      '#title' => $this->t('Show the Slider on the following pages'),
      '#description' => $this->t('Enter the path of the pages you want the slider to render on, each path on a separate line'),
      '#default_value' => $this->config('commerce_amazon_slider.settings')->get('show_on_pages'),
   ];

   $form['actions'] = [
      '#type' => 'actions',
   ];

   $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Save Settings'),
   ];

   return $form;
}

public function submitForm(array &$form, FormStateInterface $form_state)
{
   $show_on_pages = $form_state->getValue('show_on_pages');
   \Drupal::configFactory()->getEditable('commerce_amazon_slider.settings')->set('show_on_pages', $show_on_pages)->save();
}

Then when you navigate to the form from your link you should see the following page, and when you save the values are updated in the form

Thank you and looking forward to help you do more with Drupal