Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Create hello module in magento2

    Create hello module in magento2

    You can get setup guide from http://webkul.com/blog/installation-of-magento2-on-ubuntu/

    In Magento2 there is a drastic change in the structure of the code. All the code pools are removed and also the Skin directory. There are many changes related to the theme folder as well. To understand how the structure of Magento2 works, let us check it by creating a simple hello module.

    Before starting the code section, let us create the directory structure that we will need.

    app/code/Webkul/Hello
    app/code/Webkul/Hello/etc
    app/code/Webkul/Hello/etc/frontend
    app/code/Webkul/Hello/Controllers
    app/code/Webkul/Hello/view/frontend/layout
    app/code/Webkul/Hello/view/frontend/templates

    Now, as we have the directory structure ready, we will now create file as per module requirement in given sequence:

    1.First, we have to create the module registration  file named registration.php in app/code/Webkul/Hello

    <?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Webkul_Hello',
        __DIR__
    );
    

    2.Then we have to create the module configuration file named module.xml in app/code/Webkul/Hello/etc

    <?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="Webkul_Hello" setup_version="2.0.0">
        </module>
    </config>

    3. Now, we will create a route configuration file named routes.xml in app/code/Webkul/Hello/etc/frontend

    <?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="hello" frontName="hello">
                <module name="Webkul_Hello" />
            </route>
        </router>
    </config>

    4. As we have defined the route now, we will create the controller file. In Magento2, we need to create separate file for each action under the controller folder.

    In our case we will create Index.php file in app/code/Webkul/Hello/Controller/Index

    In every action file there will be a method name excute() that will be invoked when the action is called.

    <?php
    namespace Webkul\Hello\Controller\Index;
    
    use Magento\Framework\App\Action\Action;
    use Magento\Framework\App\Action\Context;
    use Magento\Framework\View\Result\PageFactory;
    
    /**
     * Webkul Hello Landing page Index Controller.
     */
    class Index extends Action
    {
        /**
         * @var PageFactory
         */
        protected $_resultPageFactory;
    
        /**
         * @param Context     $context
         * @param PageFactory $resultPageFactory
         */
        public function __construct(
            Context $context,
            PageFactory $resultPageFactory
        ) {
            $this->_resultPageFactory = $resultPageFactory;
            parent::__construct($context);
        }
    
        /**
         * Hello Landing page.
         *
         * @return \Magento\Framework\View\Result\Page
         */
        public function execute()
        {
            $resultPage = $this->_resultPageFactory->create();
            // Set title of page
            $resultPage->getConfig()->getTitle()->set(__('Sample module in Magento 2 by Webkul'));
            return $resultPage;
        }
    }

    5. Further, we will create a Block file named Hello.php in app/code/Webkul/Hello/Block

     
    <?php
    namespace Webkul\Hello\Block;
    
    /*
     * Webkul Hello Block
     */
    
    class Hello extends \Magento\Framework\View\Element\Template
    {
        /**
         * @return $this
         */
        protected function _prepareLayout()
        {
            return parent::_prepareLayout();
        }
    
        /**
         * getContentForDisplay
         * @return string
         */
        public function getContentForDisplay()
        {
            return __("Successful! This is a sample module in Magento 2 by webkul.");
        }
    }

    6. Now, as we have our Controller and Block ready, we will create layout file named hello_index_index.xml in app/code/Webkul/Hello/view/frontend/layout

    Here we will create separate file for each action in layout.

    <?xml version="1.0"?>
    <page 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="Webkul\Hello\Block\Hello" name="hello" template="success.phtml" />
            </referenceContainer>
        </body>
    </page>

    7. Further, we will create our phtml file that will be called named success.phtml in app/code/Webkul/Hello/view/frontend/templates

    <h2><?php echo $block->getContentForDisplay(); //method call from block ?></h2>

    8. Finally, as all our module files are created now we will install our module by run following commands from magento root directory.

    $ php bin/magento setup:upgrade
    $ php bin/magento cache:clean
    $ php bin/magento cache:flush

    9. Now our module installed properly.

    We can check the out put using www.domain.com/hello/index

    10. Output page display as following

    output

    Download sample code form github

    Thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    2 comments

  • Ashwani Shukla
    This also doesn’t work. Actually None of you methods work for creating a successful module. It’s also a total non working content.
    For frontend my hello_index_index.xml file wasn’t read by system.
  • priyatosh ojha
    Very nice document sir…!!!
    thank you..
  • Back to Top