A Complete Tutorial on Magento 2 Module Development

Hello-World-Meetanshi

“Hello World” is where a new programmer is born! 😄
Starting with the ABCD of Magento 2 development, hello world module is mandatory!

So, here I am, with a post for newbies to create a simple module in Magento 2, for hello world. Magento 2 module development is a stepwise process and needs to be done with some prerequisites conditions.

Follow the below tutorial and create your own basic module in Magento 2!

Mục Lục

Things to take care of before you create a custom module in Magento 2:

Switch to developer mode: Switch to developer mode in order to see every error Magento is throwing at you. Use the below command:

php

bin

magento

deploy

mode

set

developer

Learn more about the Magento 2 Modes

Method for Magento 2 Module Development:

Getting to each step,

Module Setup
1. Create the below folders
  1. app/code/Meetanshi
  2. app/code/Meetanshi/Helloworldwhere Meetanshi folder is the module’s namespace and our module’s name is Helloworld!Note: You’d be required to create the “code” folder manually if it is not in the “app” directory.
2. Create a module.xml file in the app/code/Meetanshi/Helloworld/etc folder with the below code:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  <?
  
  xml
  
  version
  
  =
  
  “1.0”
  
  ?>
  
  <
  
  config
  
  xmlns
  
  :
  
  xsi
  
  =
  
  “http://www.w3.org/2001/XMLSchema-instance”
  
  xsi
  
  :
  
  noNamespaceSchemaLocation
  
  =
  
  “urn:magento:framework:Module/etc/module.xsd”
  
  >
  
  <
  
  module
  
  name
  
  =
  
  “Meetanshi_Helloworld”
  
  setup_version
  
  =
  
  “1.0.0”
  
  >
  
  <
  
  /
  
  module
  
  >
  
  <
  
  /
  
  config
  
  >
3. Create a registration/php file in the app/code/Meetanshi/Helloworld folder to register the module. Implement the below code:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  <
  
  ?
  
  php
  
  \
  
  Magento
  
  \
  
  Framework
  
  \
  
  Component
  
  \
  
  ComponentRegistrar
  
  :
  
  :
  
  register
  
  (
  
  \
  
  Magento
  
  \
  
  Framework
  
  \
  
  Component
  
  \
  
  ComponentRegistrar
  
  :
  
  :
  
  MODULE
  
  ,
  
  ‘Meetanshi_Helloworld’
  
  ,
  
  __DIR__
  
  )
  
  ;
4. Open the terminal and go to the Magento 2 root. Run the below command
  
  1
  
  php
  
  bin
  
  /
  
  magento
  
  setup
  
  :
  
  upgrade
  
  Note: Make sure if your module is installed. Go to Admin > Stores > Configuration > Advanced > Advanced. Check if the module is present in the list. Else, open app/etc/config.php and check the array for the “Meetanshi_Helloworld” key whose value must be 1.
Creating a Controller
1. Define the router with routes.xml file in the app/code/Meetanshi/Helloworld/etc/frontend folder with the below code:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  8
  
  9
  
  <?
  
  xml
  
  version
  
  =
  
  “1.0”
  
  ?>
  
  <
  
  config
  
  xmlns
  
  :
  
  xsi
  
  =
  
  “http://www.w3.org/2001/XMLSchema-instance”
  
  xsi
  
  :
  
  noNamespaceSchemaLocation
  
  =
  
  “urn:magento:framework:App/etc/routes.xsd”
  
  >
  
  
  
  <
  
  router
  
  id
  
  =
  
  “standard”
  
  >
  
  
  
  <
  
  route
  
  id
  
  =
  
  “helloworld”
  
  frontName
  
  =
  
  “helloworld”
  
  >
  
  
  
  <
  
  module
  
  name
  
  =
  
  “Meetanshi_Helloworld”
  
  /
  
  >
  
  
  
  <
  
  /
  
  route
  
  >
  
  
  
  <
  
  /
  
  router
  
  >
  
  <
  
  /
  
  config
  
  >
2. Create the Index.php file in the app/code/Meetanshi/Helloworld/Controller/Index folder with the below code:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  8
  
  9
  
  10
  
  11
  
  12
  
  13
  
  14
  
  15
  
  16
  
  17
  
  18
  
  19
  
  20
  
  21
  
  22
  
  23
  
  24
  
  25
  
  26
  
  27
  
  <
  
  ?
  
  php
  
  namespace
  
  Meetanshi
  
  \
  
  Helloworld
  
  \
  
  Controller
  
  \
  
  Index
  
  ;
  
  use
  
  Magento
  
  \
  
  Framework
  
  \
  
  App
  
  \
  
  Action
  
  \
  
  Context
  
  ;
  
  use
  
  Magento
  
  \
  
  Framework
  
  \
  
  App
  
  \
  
  Action
  
  \
  
  Action
  
  ;
  
  use
  
  Magento
  
  \
  
  Framework
  
  \
  
  View
  
  \
  
  Result
  
  \
  
  PageFactory
  
  ;
  
  class
  
  Index
  
  extends
  
  Action
  
  {
  
  protected
  
  $
  
  _resultPageFactory
  
  ;
  
  public
  
  function
  
  __construct
  
  (
  
  Context
  
  $
  
  context
  
  ,
  
  PageFactory
  
  $
  
  resultPageFactory
  
  )
  
  {
  
  $
  
  this
  
  –
  
  >
  
  _resultPageFactory
  
  =
  
  $
  
  resultPageFactory
  
  ;
  
  parent
  
  :
  
  :
  
  __construct
  
  (
  
  $
  
  context
  
  )
  
  ;
  
  }
  
  public
  
  function
  
  execute
  
  (
  
  )
  
  {
  
  $
  
  resultPage
  
  =
  
  $
  
  this
  
  –
  
  >
  
  _resultPageFactory
  
  –
  
  >
  
  create
  
  (
  
  )
  
  ;
  
  return
  
  $
  
  resultPage
  
  ;
  
  }
  
  }
  
  In Magento 2 every action has its own class which implements the execute() method.
Creating a block

Create a simple block class with the getHelloWorldTxt() method which returns the “Hello world” string.
1. Create a Helloworld.php file in the app/code/Meetanshi/Helloworld/Block folder with the below code:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  8
  
  9
  
  10
  
  11
  
  12
  
  <
  
  ?
  
  php
  
  namespace
  
  Meetanshi
  
  \
  
  Helloworld
  
  \
  
  Block
  
  ;
  
  use
  
  Magento
  
  \
  
  Framework
  
  \
  
  View
  
  \
  
  Element
  
  \
  
  Template
  
  ;
  
  class
  
  Helloworld
  
  extends
  
  Template
  
  {
  
  public
  
  function
  
  getHelloWorldText
  
  (
  
  )
  
  {
  
  return
  
  ‘Hello world!’
  
  ;
  
  }
  
  }
Creating a layout and template files

Layout files and templates are placed in the view folder inside the module. We can have three subfolders inside the view folder: adminhtml, base, and frontend.
1. Use the below code to create a helloworld_index_index.xml file in the app/code/Meetanshi/Helloworld/view/frontend/layout folder:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  <
  
  page
  
  xmlns
  
  :
  
  xsi
  
  =
  
  “http://www.w3.org/2001/XMLSchema-instance”
  
  xsi
  
  :
  
  noNamespaceSchemaLocation
  
  =
  
  “../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd”
  
  layout
  
  =
  
  “1column”
  
  >
  
  <
  
  body
  
  >
  
  <
  
  referenceContainer
  
  name
  
  =
  
  “content”
  
  >
  
  <
  
  block
  
  class
  
  =
  
  “Meetanshi\Helloworld\Block\Helloworld”
  
  name
  
  =
  
  “helloworld”
  
  template
  
  =
  
  “helloworld.phtml”
  
  /
  
  >
  
  <
  
  /
  
  referenceContainer
  
  >
  
  <
  
  /
  
  body
  
  >
  
  <
  
  /
  
  page
  
  >
  
  Every page has a layout hand. For our controller action, the layout handle is helloworld_index_index. You may create a layout configuration file for every layout handle. In our layout file, we have added a block to the content container and set the template of our block to helloworld.phtml, which we create in the next step.
2. Create a helloworld.phtml file in the app/code/Meetanshi/Helloworld/view/frontend/templates folder
  
  1
  
  2
  
  <
  
  h1
  
  >
  
  <?php
  
  echo
  
  $this
  
  –
  
  >
  
  getHelloWorldText
  
  (
  
  )
  
  ;
  
  ?>
  
  <
  
  /
  
  h1
  
  >
  
  <
  
  !
  
  —
  
  Display
  
  Text
  
  from
  
  block
  
  file
  
  —
  
  >
  
  $this variable refers to our block class. Our method getHelloWorldTxt() returns the string “Hello world!”

Open the /helloworld/index/index URL in the browser to check the below output.

Hello World Module by Meetanshi

That’s it with the custom Magento 2 module development!

Hopefully, the post helps you go through the first Magento 2 module development stage! If you get stuck in the between, make sure to solve your doubts using the Comments section below. I’d be happy to help 🙂

Do rate the post with 5 stars!

Thank you.

4.9

(based on

Reviews)