How To Create a Magento 2 Module
In this article we'll try to answer the first question of every beginner, how to create module in magento 2. To answer their question we'll create one HelloWorld extension and learn how to create Magento 2 Extension.
Let's get started!!
To Create the module you have to follow the simple step which are listed on below for create Magento 2 HelloWorld Module.
1. First we need to create Namespace and Module Folders.
Create Devhooks
folder at app/code/Devhooks
and create another folder HelloWorld
at app/code/Devhooks/HelloWorld
Now, we need to create a module.xml
file in app/code/Devhooks/HelloWorld/etc
And paste the below code.
Note: Don't forgot to replace the Devhooks_HelloWorld
with your Namespace and Module Name if it's different.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Devhooks_HelloWorld" schema_version="0.0.1" setup_version="0.0.1">
</module>
</config>
If your module depends on any other module then add it's dependencies under <module>
tag in module.xml
file. Check below code for your reference.
<module name="Devhooks_HelloWorld" schema_version="0.0.1" setup_version="0.0.1">
<sequence>
<module name="Magento_Customer"/>
<module name="Magento_Catalog"/>
</sequence>
</module>
2. Create registration file.
Create registration.php
at app/code/Devhooks/HelloWorld/registration.php
file. And paste the below code.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Devhooks_HelloWorld',
__DIR__
);
3. Create a frontend router.
Create a routes.xml
at app/code/Devhooks/HelloWorld/etc/frontend/routes.xml
And paste the below code.
<?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="Devhooks_HelloWorld"/>
</route>
</router>
</config>
In Above code
<router id="standard">
indicates which node Magento should look at to find the URL's front Name.Then, the
route id="helloworld"
shown which router we will use (frontend or adminhtml).And
route frontName="helloworld"
is the first part of the URL and it should be unique.
4. Create a Controller action.
Create the file Index.php
in app/code/Devhooks/HelloWorld/Controller/Index/Index.php
. This will map to http://domainname.com/helloworld/index/index
Now, let's see how to find the action of any module. In Following URL http://domainname.com/helloworld/index/index
- helloworld: front name
- index: name of controller folder
- index: name of action file – index.php
In below controller action we have extend magento default action \Magento\Framework\App\Action\Action
to use some default methods. In every action file, there will be a method name execute()
that will invoked when the action is called.
<?php
namespace Devhooks\HelloWorld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
/** @var \Magento\Framework\View\Result\Page */
protected $resultPageFactory;
/** * @param \Magento\Framework\App\Action\Context $context */
public function __construct(\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Blog Index, shows a list of recent blog posts.
*
* @return \Magento\Framework\View\Result\PageFactory
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__('Devhooks Hello World'));
return $resultPage;
}
}
5. Create a layout file.
Create helloworld_index_index.xml
at app\code\Devhooks\Helloworld\view\frontend\layout\helloworld_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Devhooks\HelloWorld\Block\HelloWorld" name="formbuilder" template="Devhooks_HelloWorld::helloworld.phtml"/>
</referenceContainer>
</body>
</page>
6. Create a block for our module.
Create block file HelloWorld.php
at app/code/Devhooks/HelloWorld/Block/HelloWorld.php
<?php
namespace Devhooks\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
return parent::_prepareLayout();
}
}
7. Create a template file.
Create helloworld.phtml
at app/code/Devhooks/HelloWorld/view/frontend/templates/helloworld.phtml
<h3>Welcome to HelloWorld Extension.</h3>
8. Now it's time to active Devhooks_HelloWorld extension.
For that we have two ways to active Devhooks_Helloworld
extension.
Directly edit file
app/etc/config.xml
In the array module, add the element:'Devhooks_Helloworld' => 1
Open Command line in folder root of magento and run both commands
php bin/magento setup:upgrade
php bin/magento cache:flush
Bingo!! we are done all steps.
Run the following link http://domainname.com/helloworld/index/index, and check the result.
That's it!!
I hope this article helped you to find what you were looking for.
Bookmark it for your future reference. Do comment below if you have any other questions on that.
P.S. Do share this article with your team.