Magento 2 Extensions, Page 4 Category

Here, I am going to explain how easily we can create Magento 2 HelloWorld Extension.

The following directory structure we have to follow in order to create our Magento 2 module.

Magento Installation

Directory/app/code/Vender_Name/Module_Name

or

Root_directory/app/code/Vender_Name/Module_Name

Here...

Root_directory/app/code/Wishusucess/HelloWorld

 

Follow the below steps to create the HELLO WORLD module

The modules have a 2 part naming structure, i.e,

Namespace/Module.

Wishusucess is the vendor name and HelloWorld is the module name.

So now that we’ve established the directory structure, let’s make a simple module that will show “Hello World” on the frontend section when we will open the front view.

 

HelloWorld Extension in Magento 2

 

Url: http://wishusucess.com/helloworld/

---

So our complete directory structure will be look something like this.

• Wishusucess/HelloWorld/registration.php
• Wishusucess/HelloWorld/etc/module.xml
• Wishusucess/HelloWorld/etc/frontend/routes.xml
• Wishusucess/HelloWorld/Controller/Index/Index.php
• Wishusucess/HelloWorld/Block/Hello.php
• Wishusucess/HelloWorld/view/frontend/layout/helloworld_index_index.xml
• Wishusucess/HelloWorld/view/frontend/templates/hello.phtml

---

 

Magento 2 HelloWorld Extension Basic File

So let's start with the registration.php file.

• Wishusucess/HelloWorld/registration.php

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

 

This is one of the first files which needs to register our module with Magento 2. Every module must contain this file otherwise extension will not get registered with the root.

 

Now the second most important file is module.xml that just contains some basic information about the module. Like the module name and module version.

Wishusucess/HelloWorld/etc/module.xml

<?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="Wishusucess_HelloWorld" setup_version="1.0.0">
</module>
</config>

 

Routes in HelloWorld Extension

If you want to give a path then it is necessary to create routes.xml file

We have added it in the frontend/ folder because it is frontend access root if we need to access in adminhtml side then we need to add it to adminhtml/ folder

Content would be:

Wishusucess/HelloWorld/etc/frontend/routes.xml

<?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="Wishusucess_HelloWorld" />
</route>
</router>
</config>

 

Now, the controller actually contains where the request would be routed.

Wishusucess/HelloWorld/Controller/Index/Index.php

<?php
/**
*
* @package magento2
* @author Wishusucess Magento Team
* @license http://wishusucess.com/licenses/OSL-3.0 Open Software License v. 3.0 (OSL-3.0)
* @link http://www.wishusucess.com/
*/
namespace Wishusucess\HelloWorld\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action {
/**
* @var PageFactory
*/
private $pageFactory;


/**
* Index constructor.
* @param Context $context
* @param PageFactory $pageFactory
*/
public function __construct(
Context $context,
PageFactory $pageFactory
)
{
parent::__construct($context);
$this->pageFactory = $pageFactory;
}


/**
* Execute action based on request and return result
*
* Note: Request will be added as operation argument in future
*
* @return \Magento\Framework\Controller\ResultInterface|ResponseInterface
* @throws \Magento\Framework\Exception\NotFoundException
*/
public function execute()
{
$page = $this->pageFactory->create();
return $page;
}
}

 

Now to block file we have to create which contains the block's function within Magento's MVC architecture is to structure and provide data to the template which the template will then display

Wishusucess/HelloWorld/Block/Hello.php

<?php
/**
*
* @package magento2
* @author Wishusucess Magento Team
* @license http://wishusucess.com/licenses/OSL-3.0 Open Software License v. 3.0 (OSL-3.0)
* @link http://www.wishusucess.com/
*/

namespace Wishusucess\HelloWorld\Block;

use Magento\Framework\View\Element\Template;

class Hello extends Template
{
public function getText() {
return "Hello World";
}
}

 

In Magento 2 MVC structure view/layout file has to handle the request.

Wishusucess/HelloWorld/view/frontend/layout/helloworld_index_index.xml

<?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="Wishusucess\HelloWorld\Block\Hello" name="helloworld" template="Wishusucess_HelloWorld::hello.phtml" />
</referenceContainer>
</body>
</page>

 

Now template file shows the data on the frontend.

Wishusucess/HelloWorld/view/frontend/templates/hello.phtml

<?php
/* @var \Wishusucess\HelloWorld\Block\Hello $block */
?>
<label><?= __("This data returns from block function getText() ") ?></label>
<h1><?= $block->getText() ?></h1>

 

Now run the following command:

php bin/magento setup:upgrade 

php bin/magento setup:di:compile 

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Now go to browser and type something like this: yourstore.com/helloworld/

you will see output like the below screenshot.

 

Download Code:

Wishusucess/HelloWorld

 

Related Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Elasticsearch: How to Install Elasticsearch in Ubuntu 18.04

 

Suggested Post:

SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing