The trend of creating a custom module is gaining a lot of popularity after the official release of Magento 2 version. Magento web store owners and developers are leveraging the Magento2 Module development process to take their e-store to the new heights of success.<\/p>\n
With that concept in mind, we bring you this tutorial where we will show step-by-step guide for creating a new module in Magento 2. To make this blog post more useful, we will create a HelloWorld<\/b> module in the new version of Magento. We will also learn some basic functionality and consider all the necessary development aspects to make your job easier.<\/p>\n
Let’s get started!<\/b><\/p>\nBasic Requirements<\/h2>\n
Before starting the Module development process in Magento 2, make sure you fulfill the following requirements:<\/p>\n
php bin\/magento deploy :mode:set developer<\/pre>\n<\/li>\n<\/ul>\nNow, let’s get to the procedure of creating a new custom module in Magento 2.<\/p>\n
1. Creating a Module Folder<\/h2>\n
The process of creating a module in Magento 2 is quite different from the procedure we use in the older version of Magento. In Magento 2, code pools are removed from the code-base file structure. And all the modules are grouped by namespace and reside in the
app\/code<\/code> folder. This means you will need to create a module directly in theapp\/code<\/code> directory using this format:app\/code\/<Vendor<\/span>>\/<ModuleName<\/span>><\/code>. <\/p>\n1.1 Module Setup<\/h3>\n
To setup the module, we will need to create the module folder and other essential files. This particular step will help you register your new module for the latest version of Magento with ease.<\/p>\n
1.1.1 Create these two folders:<\/h3>\n
app\/code\/webstore<\/code><\/p>\n
app\/code\/Webstore\/HelloWorld<\/code><\/p>\nNote:<\/span> Here, the ‘Webstore’ is the namespace<\/b> of a module, while the ‘Helloworld’ is the module’s name<\/b>.<\/p>\n
1.1.2 Create a module.xml file to declare the module<\/h3>\n
Once your module folder has been created, you will need to create a
module.xml<\/code> file in theapp\/code\/Webstore\/HelloWorld\/etc<\/code> folder using the following code:<\/p>\n<?xml<\/span> version<\/span>=\"1.0\"<\/span>?>\r\n\r\n<config<\/span> xmlns<\/span>:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi<\/span>:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\"<\/span>> \r\n<module<\/span> name<\/span>=\"webstore_HelloMagento\"<\/span> setup_version<\/span>=\"1.0.0\"<\/span> \/>\r\n<\/module<\/span>>\r\n<\/config<\/span>>\r\n<\/pre>\nThis will create a configuration in a module etc directory to let Magento 2 recognize the name and version of the module easily.<\/p>\n
In this specific file, we will register a module with the name webstore_Helloworld<\/b> and the version 1.0.0.<\/p>\n
1.1.3 Registering the module<\/h3>\n
In Magento 2, you will need to register all your modules in the Magento system via the Magento
ComponentRegistrar<\/code> class. So, you will need to create aregistration.php<\/code> file in theapp\/code\/Webstore\/Helloworld<\/code> folder using the following commands (we are creating this file in Magento root folder):<\/p>\n<?php
<\/span>\\<\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>Component<\/span>\\<\/span>ComponentRegistrar<\/span>::<\/span>register<\/span>(\\<\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>Component<\/span>\\<\/span>ComponentRegistrar<\/span>::<\/span>MODULE<\/span>,<\/span>'webstore_Helloworld'<\/span>,<\/span>__DIR__<\/span>);<\/span><\/pre>\n1.1.4 Enabling the module<\/h3>\n
After registering your module, you can enable it in the Magento 2 environment. To check whether the Magento has recognized the new module or not, you will need to run the following command line:<\/p>\n
php bin\/magento module:status1<\/pre>\nThe above step will show you the following result:<\/p>\n
List of disabled modules:\r\nWebstore_HelloWorld<\/pre>\nThis means the system has recognized the module but it is not enabled in your Magento system. For that, you will need to run the following command to enable the module:<\/p>\n
php bin\/magento module:enable Webstore_HelloWorld<\/pre>\nThis will enable the module in your system and show you the result like this:<\/p>\n
The following modules has been enabled:\r\n- Webstore_HelloWorld<\/pre>\nSince you are enabling this module for the first time in your system, make sure you run this command to let Magento check and upgrade the module database with ease:<\/p>\n
php bin\/magento setup:upgrade<\/pre>\nNote:<\/span> Access the Admin »<\/b> Stores »<\/b> Configuration »<\/b> Advanced »<\/b> Advanced to check the availability of your new module.<\/p>\n
2. Create a Controller<\/h2>\n
2.1 Creating the routes.xml file for your new module<\/h3>\n
Under this step, you will need to define the router for your new module by creating the
routes.xml<\/code> file in the Magento root directory. Add the following piece of code in theapp\/code\/Webstore\/HelloWorld\/frontend<\/code> folder:<\/p>\n<?xml<\/span> version<\/span>=\"1.0\"<\/span> ?> \r\n<config<\/span> xmlns<\/span>:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi<\/span>:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\"<\/span>>\r\n<router<\/span> id<\/span>=\"standard\"<\/span>>\r\n<route<\/span> id<\/span>=\"helloworld\"<\/span> frontName<\/span>=\"helloworld\"<\/span>>\r\n<module<\/span> name<\/span>=\"Webstore_Helloworld\"<\/span>\/>\r\n<\/route<\/span>>\r\n<\/router<\/span>>\r\n<\/config<\/span>>\r\n\r\n\r\n<\/pre>\nNote:<\/span> The above code will help you define your frontend<\/b> router and route using an id HelloWorld<\/b>. <\/p>\n
In Magento 2, the frontName attribute becomes the first part of an URL. This means your URL will be generated something like this:<\/p>\n
<frontname>\/<controller_folder-name>\/<controller_class_name>\r\n<\/pre>\nFor an example:<\/p>\n
helloworld\/index\/index<\/pre>\n2.2 Create the index.php controller file<\/h3>\n
In this step, you will need to create controller and action to display the HelloWorld module by creating the
index.php<\/code> controller file. For that, add the following code in theapp\/code\/Webstore\/HelloWorld\/Controller\/Index<\/code> folder:<\/p>\n<?php\r\n
<\/span>namespace <\/span>Webstore<\/span>\\<\/span>Helloworld<\/span>\\<\/span>Controller<\/span>\\<\/span>Index<\/span>;\r\n
use <\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>App<\/span>\\<\/span>Action<\/span>\\<\/span>Context<\/span>;\r\n
class <\/span>Index <\/span>extends \\<\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>App<\/span>\\<\/span>Action<\/span>\\<\/span>Action
<\/span>{
protected <\/span>$_resultPageFactory<\/span>;\r\n
public function <\/span>__construct<\/span>(<\/span>Context $context<\/span>, \\<\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>View<\/span>\\<\/span>Result<\/span>\\<\/span>PageFactory $resultPageFactory<\/span>){
<\/span>$this<\/span>-><\/span>_resultPageFactory <\/span>= <\/span>$resultPageFactory<\/span>;
<\/span>parent<\/span>::<\/span>__construct<\/span>(<\/span>$context<\/span>);
}\r\n
public function <\/span>execute<\/span>() {
<\/span>$resultPage <\/span>= <\/span>$this<\/span>-><\/span>_resultPageFactory<\/span>-><\/span>create<\/span>();
return <\/span>$resultPage<\/span>;
}
}\r\n
<\/span><\/pre>\n3. Creating a Block<\/h2>\n
With the use of
getHelloWorldTxt()<\/code> method, you will need to create a block class. This will return the “Hello world” string.<\/p>\n3.1 Creating HelloWorld.php file<\/h3>\n
Begin this step by creating a
HelloWorld.php<\/code> file in the Magento root directory. Write the following code in theapp\/code\/Webstore\/HelloWorld\/Block<\/code> folder:<\/p>\n<?php\r\n
<\/span>namespace <\/span>Webstore<\/span>\\<\/span>Helloworld<\/span>\\<\/span>Block<\/span>; \r\n
class <\/span>Helloworld <\/span>extends \\<\/span>Magento<\/span>\\<\/span>Framework<\/span>\\<\/span>View<\/span>\\<\/span>Element<\/span>\\<\/span>Template
<\/span>{
public function <\/span>getHelloWorldTxt<\/span>(){
return<\/span>'Hello world!'<\/span>;
}
}<\/span><\/pre>\n4. Creating a Layout and Template Files<\/h2>\n
In Magento 2, you can find the layout files and templates in the view folder inside your module. Under this folder, you can see three subfolders:<\/p>\n
\n
- adminhtml: used for admin files<\/li>\n
- frontend folder: used for frontend files, and<\/li>\n
- Base folder: used for both the admin and frontend files.<\/li>\n<\/ul>\n
So, first, we will create the layout and template file in the frontend layout.<\/p>\n
4.1 Create a helloworld_index_index.xml file<\/h3>\n
To create a
helloworld_index_index.xml<\/code> file, add this piece of code in theapp\/code\/Webstore\/Helloworld\/view\/forntend\/layout<\/code> folder:<\/p>\n<page<\/span> xmlns<\/span>:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi<\/span>:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd\"<\/span> layout<\/span>=\"1column\"<\/span>>\r\n<body<\/span>>\r\n<referenceContainer<\/span> name<\/span>=\"content\"<\/span>>\r\n<block<\/span> class<\/span>=\"Webstore\\Helloworld\\Block\\Helloworld\"<\/span> name<\/span>=\"helloworld\"<\/span> template<\/span>=\"helloworld.phtml\"<\/span>\/>\r\n<\/referenceContainer<\/span>>\r\n<\/body<\/span>>\r\n<\/page<\/span>>\r\n<\/pre>\nNote:<\/span> Make sure you add a block to the content container and set the template of your block to
helloworld.phtml<\/code> to create the next step.<\/p>\n4.2 Creating a helloworld.phtml file in the frontend templates folder<\/h3>\n
Now, you will need to create a
helloworld.phtml<\/code> file in theapp\/code\/Webstore\/Helloworld\/view\/frontend\/templates<\/code> folder using the following code:<\/p>\n<h1<\/span>><?php <\/span>echo <\/span>$this<\/span>-><\/span>getHelloWorldTxt<\/span>(); <\/span>?><\/span><\/