Here we are going to learn, how to develop a simple module in magento 2 and what are the pre requirements to develop a module. Here, we assume that you have successfully installed Magento 2 in your development environment.
After you have successfully installed Magento 2.0 in your development environment and it functions properly, there are two things which we recommend you to do:
Disable the System Cache:
Switch your Magento to Developer Mode:
All this information will help you to understand the new structure more easily. Now we will start to learn the module development step by step.
STEP 1: Create a module folder and necessary files to register the module.
In Magento 1.x, we have learned that module folder is created inside one of the code pools inside app/code/(community, core or local). But in Magento 2, no more code pools are available. Now , the module folder will be:
The Pragmatic folder is the module’s namespace, and Helloworld is the module’s name.
Note: If you don’t have the code folder in your app directory, create it manually.
After module folder we will create module.xml file inside app/code/Pragmatic/Helloworld/etc folder.
<?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="Pragmatic_Helloworld" setup_version="1.0.0">
</module>
</config>
And now we will create a registration.php file to register our module in Magento:
<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Pragmatic_Helloworld',
__DIR__
); Now, Open your terminal and go to the Magento 2 root. Run the following command from terminal:
php bin/magento setup:upgrade Now if you want to confirm that your module is registered in magento or not, login to magento admin and move to Stores → Configuration → Advanced → Advanced. Here you can see the list of all enabled module in Magento. One more place where you can check that your module is registered or not is app/etc/config.php. Check the array for the ‘Inchoo_Helloworld’ key, whose value should be set to 1.
STEP 2 : Create Router & Controller
Firstly we will define router by creating a routes.xml file inside app/code/Pragmatic/Helloworld/etc/frontend folder with following 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="hello" frontName="helloworld">
<module name="Pragmatic_Helloworld" />
</route>
</router>
</config>
Here we’re defining our frontend router and route with an id “helloworld”.The frontName attribute is going to be the first part of our URL.
In Magento 2 URL’s are constructed this way:
<frontName>/<controler_folder_name>/<controller_class_name> So in our example, the final URL will look like this: helloworld/index/index
Create index.php controller file inside app/code/Pragmatic/Helloworld/Controller/Index folder with following code:
<?php
namespace PragmaticHelloworldControllerIndex;
use MagentoFrameworkAppActionContext;
class Index extends MagentoFrameworkAppActionAction
{
protected $_resultPageFactory;
public function __construct(Context $context, MagentoFrameworkViewResultPageFactory $resultPageFactory)
{
$this->_resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultPage = $this->_resultPageFactory->create();
return $resultPage;
}
}
In Magento 1 each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.
STEP 3 : Create BlockHere, we will create a simple Helloworld.php block file inside
app/code/Pragmatic/Helloworld/Block folderwith following code:
<?php
namespace PragmaticHelloworldBlock;
class Helloworld extends MagentoFrameworkViewElementTemplate
{
public function getMessage()
{
return 'Hello World!';
}
}
In this block file, we have created a getMassage() method which will return a message ‘Hello World!’.
STEP 4 : Create Layout and Template file
We have seen in Magento 1.x layout file and template files are placed in a separate app/design/ folder, but in Magento 2 it is placed inside a new view folder which is placed in module folder only. Inside this we can have three folders namely: adminhtml, base or frontend.
The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin & frontend files.
Here we will first create a helloworld_index_index.xml layout file inside app/code/Pragmatic/Helloworld/view/frontend/layout folder with following code:
<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="PragmaticHelloworldBlockHelloworld"
name="helloworld" template="helloworld.phtml" />
</referenceContainer>
</body>
</page>
In our layout file, we have created a block inside content container and set the template file as helloworld.phtml file. Now we will create a template file inside
app/code/Pragmatic/Helloworld/view/frontend/template folder with following code:
<h1><?php echo $this->getMessage(); ?></h1> $this variable is referencing our block class and we are calling the method getMessage() which is returning the string ‘Hello world!’.
Now, open your browser. Hit your yourdomain.com/helloworld/index/index. You can see the message as below:
article
Leave a Reply
You must be logged in to post a comment.