In the last blog, I talked about how to setup Magento 2 and introduce you to the basic structure of Magento Module creation and routing in Magento 2. In this blog, we will explore further into blocks and templates to display something in the frontend.

The first step let’s modify the SayHello.php controller that we implemented in the previous blog.

app/code/Demo/HelloWorld/Controller/Index/SayHello.php

_pageFactory = $pageFactory;
parent::__construct($context);
}

public function execute(){
return $this->_pageFactory->create();
}
}

The PageFactory should be created inside the execute method to render the view.
Next step is to create the layout. The layout is located inside {module_root}/view/{area}/layout/ folder. The Area in the path can be frontend or adminhtml which define where the layout will be applied. There is a special layout file name default.xml which will be applied for all the page in its area. Otherwise, the layout file will have name as format: {router_id}_{controller_name}_{action_name}.xml. In our case, the path layout is located in Demo/HelloWorld/view/frontend/layout/ and the name of the layout file is helloworld_index_sayhello.xml.
Edit the helloworld_index_sayhello.xml with the following code.

Next step is to create the block (DemoHelloWorldBlockSayHello) which would contain all the view logic.

<?php
namespace DemoHelloWorldBlock;
use MagentoFrameworkViewElementTemplateContext;

class SayHello extends MagentoFrameworkViewElementTemplate
{
public function __construct(Context $context){
parent::__construct($context);
}

public function sayHello(){
return __('Hello World');
}
}

Every block in Magento 2 must extend from MagentoFrameworkViewElementTemplate. In this block, we will define a method sayHello() to show the word “Hello World”.
The template file should be located in {module_root}/view/{area}/templates/ . In our example, Demo/HelloWorld/view/frontend/templates/sayhello.phtml is the location of the template file and the name of the file should be sayhello.phtml that was mentioned in helloworld_index_sayhello.xml

sayHello();
?>

In the template file, we can use the variable $block for the block object. As you see, we call the method sayHello() in Block.

Now inside your project directory open the terminal and run the following command:

sudo php bin/magento setup:upgrade
sudo php bin/magento setup:di:compile
sudo php bin/magento setup:static-content:deploy
sudo php bin/magento cache:clean
sudo chmod -R 777 .

*For development mode, I like to give all 777 permission which is not permissible in production server.
Open your browser and visit the following URL: http:///helloworld/index/sayhello. You will see “Hello World” output.

Further Reference for Layout Structure Magento 2:

https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/layout-overview.html
https://medium.com/@ishtiaque05/building-a-module-in-magento-2-part-1-fc08da0befae

Contributor: Syed Ishtiaque Ahmad, Nascenia