Magento 2 – Hello World

Magento 2 – Hello World

This post we will show you How to create Hello World Module in Magento 2.

As for Magento 2 Structure, all you should know all custom modules reside in the folder app/code, local and community are has been removed in Magento 2.

In this post you will know how to create a new custom module, create route and display “Hello world

Step 1:

In Magento 2 module name is divided into two part “Namespace_ModuleName“, the first part is the vendor name and second part is module name, folder path should be “Namespace/ModuleName“, let take our module name to be “Solution_HelloWorld”.

app/code/Solution/HelloWorld

Step2:

All module need a file named “module.xml”, let create it in our module.

app/code/Solution/HelloWord/module.xml

Contents are:

<?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="Solution_HelloWorld" setup_version="1.0.0"/>
</config>

Absolutely, you need more two files are registration.php and composer.json

  • app/code/Solution/HelloWorld/registration.php: contents are
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Solution_HelloWorld',
    __DIR__
);
  • app/code/Solution/HelloWorld/composer.json: content would be
{
    "name": "solution/module-helloworld",
    "description": "",
    "type": "magento2-module",
    "license": "proprietary",
    "authors": [
        {
            "name": "Solution Tutorials",
            "email": "[email protected]"
        }
    ],
    "minimum-stability": "dev",
    "require": {},
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Solution\HelloWorld\": ""
        }
    }
}

 

Step 3:

All done the module is ready, now you need to enable this module, from Magento root directory, please run

bin/magento module:enable Solution_HelloWorld;

or you can view module name if you run the command

bin/magento module:status;

the result should be

List of disabled modules:
Solution_Hello

Step 4:

After bin/magento module:enable Solution_HelloWorld;  you need to run bin/magento setup:upgrade;

bin/magento setup:upgrade;

Let check your module on app/etc/config.xml 

you will see a long list of modules there, just add your module as well

'Solution_HelloWorld' => 1

Step 5: Controller and Route

Now we need a URL that you can show “Hello World”, Route and Controller in Magento is another way to create custom URL in Magento 2.

  1. Route:– In Magento 2 Route can be defined in [Module Path]/etc/frontend/routes.xml, this file to define frontend route can access without Login as Admin.
    <?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 frontName="solution" id="solution">
                <module name="Solution_HelloWorld"/>
            </route>
        </router>
    </config>

     

  2. Controller
    – Create controller [domain-url]/solution/helloworld/ as solution is frontName is defined at routes.xml

    namespace Solution\HelloWorld\Controller\Helloworld;
    
    class Index extends \Magento\Framework\App\Action\Action
    {
    
        protected $resultPageFactory;
    
        /**
         * Constructor
         *
         * @param \Magento\Framework\App\Action\Context  $context
         * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
         */
        public function __construct(
            \Magento\Framework\App\Action\Context $context,
            \Magento\Framework\View\Result\PageFactory $resultPageFactory
        ) {
            $this->resultPageFactory = $resultPageFactory;
            parent::__construct($context);
        }
    
        /**
         * Execute view action
         *
         * @return \Magento\Framework\Controller\ResultInterface
         */
        public function execute()
        {
            return $this->resultPageFactory->create();
        }
    }

     

    Now you can access to [your domain]/solution/helloworld/ to view the result

Step 6: Layout & Block

This is the final advanced step, let create a block and define it on your layout to echo “Hello World” or you can return “Hello World” on your controller.

    • Create your layout view/frontend/layout/solution_helloworld_index.xml
      Content are:

      <?xml version="1.0" ?>
      <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <body>
              <referenceContainer name="content">
                  <block class="Solution\HelloWorld\Block\Helloworld\Index" 
                         name="helloworld.index" template="Solution_HelloWorld::helloworld/index.phtml"/>
              </referenceContainer>
          </body>
      </page>
    • Let create Solution\HelloWorld\Block\Helloworld\Index block.
      <?php
      
      
      namespace Solution\HelloWorld\Block\Helloworld;
      
      class Index extends \Magento\Framework\View\Element\Template
      {
      
          /**
           * Constructor
           *
           * @param \Magento\Framework\View\Element\Template\Context  $context
           * @param array $data
           */
          public function __construct(
              \Magento\Framework\View\Element\Template\Context $context,
              array $data = []
          ) {
              parent::__construct($context, $data);
          }
      }
    • Absolutely Block needs template: Solution_HelloWorld::helloworld/index.phtml => view/frontend/templates/helloworld/index.phtml
      <h2>Hello World</h2>

Let Flush the cache and access [your domain]/solution/helloworld/

Thank for reading.

Readmore Development posts https://www.solutiontutorials.com/category/development/

More technical document: http://devdocs.magento.com

Please follow and like us:
error

Leave a Reply

Your email address will not be published.

Follow by Email
Facebook
Facebook
LinkedIn