We are going to build a very simple extension in Magento 2. When finished, the extension ‘s output will say ” Hello Weblizar, This is your first hello world Magento Extension! ” in the block content on a custom frontend route. Let us learn how to create an extension in magento 2 with hello world as our output.
Requirement :
At list, you have latest Magento 2 version which is currently 2.1. Is installed on your local system.
Before we start a Magento 2 extension development, there are two things people often forget and we recommend you to do:
1. Disable Magento cache
Disabling Magento cache during development will save you some time because you won’t need to manually flush the cache every time you make changes to your code.
The easiest way to disable cache is to go to Admin => System => Cache Management => select all cache types and disable them.
2. Put Magento into a developer mode
You should put Magento into a developer mode to ensure that you see all the errors Magento is throwing at you.
In order to do this, open your terminal and go to the Magento 2 root. From there you should run the following command:
php bin/magento deploy:mode:set developer
How To Create An Extension In Magento:
Creating the extension files and folders:
Extension Setup
The first step is to create the extension folder and necessary files required to register a Magento extension.
1. Create the following folders:
- app/code/Weblizar
- app/code/Weblizar/Helloworld
The Weblizar folder is the extension namespace, and Helloworld is the extension name.
Note: If you don’t have the code folder in your app directory, create it manually.
2. Now that we have an extension folder, we need to create a module.XML file in the app/code/Weblizar/Helloworld/etc folder with the following code:
<?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=”Weblizar_Helloworld” setup_version=”1.0.0″></module>
</config>
3. To register the module, create a registration.php file in the app/code/Weblizar/Helloworld folder with the following code:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
‘Weblizar_Helloworld’,
__DIR__
); ?>
4. Open your terminal and go to the Magento 2 root. Run from there the following command:
php bin/magento setup:upgrade
If you want to make sure that the extension is installed, you can go to Admin => Stores => Configuration => Advanced => Advanced and check that the extension is present in the list or you can open app/etc/config.php and check the array for the ‘Weblizar_Helloworld’ key, whose value should be set to 1.
Creating a controller
1. First we need to define the router. To do this, create a routes.XML file in the app/code/Weblizar/Helloworld/etc/frontend folder with the 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=”helloworld” frontName=”helloworld”>
<module name=”Weblizar_Helloworld” />
</route>
</router>
</config>
Here we are 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
2. Now we create the Index.php controller file in the app/code/Weblizar/Helloworld/Controller/Index folder with the following code:
<?php
namespace Weblizar\Helloworld\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action
{
protected $_resultPageFactory;public function __construct(Context $context, \Magento\Framework\View\Result\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
We will 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/Weblizar/Helloworld/Block folder with the following code:
<?php
namespace Weblizar\Helloworld\Block;class Helloworld extends \Magento\Framework\View\Element\Template
{
public function getHelloWorldTxt()
{
return ‘Hello Weblizar, This is your first hello world magento Extension!’;
}
}
Creating a layout and template files
In Magento 2, layout files and templates are placed in the view folder inside your extension. Inside the view folder, we can have three subfolders: adminhtml, base, and frontend.
The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin and frontend files.
1. First, we will create a helloworld_index_index.XML file in the app/code/Weblizar/Helloworld/view/frontend/layout folder with the 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=”Weblizar\Helloworld\Block\Helloworld” name=”helloworld” template=”helloworld.phtml” />
</referenceContainer>
</body>
</page>
Every page has a layout hand and for our controller action, the layout handle is helloworld_index_index. You can 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 will create in the next step.
2. Create a helloworld.phtml file in the app/code/Weblizar/Helloworld/view/frontend/templates folder with the following code:
<h1><?php echo $this->getHelloWorldTxt(); ?></h1>
$this variable is referencing our block class and we are calling the method getHelloWorldTxt() which is returning the string ‘Hello world!’.
And that’s it. Open the /helloworld/index/index URL in your browser and you should get something like this and
