How to create a frontend custom page module with view template files in magento 2.3

Question

I have doubt as how to create Frontend Module with View template files. I have created Module using this reference Magento Documentation "https://devdocs.magento.com/videos/fundamentals/create-a-new-page/". In this Documentation they have Completed till the Controller section, they haven't explained as how to pass the collected data to view->frontend folder.

Please find the below code for creating frontend module

File path:app/code/VendorName/ModuleName/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="salesperson" frontName="salesperson">
            <module name="VendorName_ModuleName"/>
        </route>
    </router>
</config>

File path:app/code/VendorName/ModuleName/Controller/Login/Index.php

<?php
namespace VendorName\ModuleName\Controller\Login;
class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;
    public function __construct(
       \Magento\Framework\App\Action\Context $context,
       \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
       $this->resultPageFactory = $resultPageFactory;
       parent::__construct($context);
}

    public function execute()
    {
        return  $resultPage = $this->resultPageFactory->create();
    } 
}

File path:app/code/VendorName/ModuleName/view/frontend/layout/salesperson_login_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">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="app_login_page" template="VendorName_ModuleName::salesperson_login_index.phtml" />
    </referenceContainer>
</page>

File path:app/code/VendorName/ModuleName/view/frontend/templates/salesperson_login_index.phtml

<h1>Template file for Frontend Module</h1>

After creating all the above steps, I called the URL as http://domainname.com/salesperson/login/index , It just bring the store default header and footer content without our template code.

Someone help me as to Create View files and pass the data from controller to view files in Magento Custom Frontend Module!!!

Thanks in Advance :)

Regards, Hari

Answer 1

Name of the module is defined as VendorName_ModuleName

it is necessary to create etc folder and add the module.xml file

app/code/VendorName/ModuleName/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="VendorName_ModuleName" setup_version="1.0.0">
    </module>
</config>

we will add registration.php

app/code/VendorName/ModuleName

registration.php

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

we will create a controller to test module but Before create a controller, we will create a route for VendorName_ModuleName module.

To add route, it is necessary to create routes.xml file

app/code/VendorName/ModuleName/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 frontName="salesperson" id="salesperson">
            <module name="VendorName_ModuleName"/>
        </route>
    </router>
</config>

Then, we will continue to create the controller and action

app/code/VendorName/ModuleName/Controller/Login

Index.php

<?php
namespace VendorName\ModuleName\Controller\Login;

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 {

    private $pageFactory;

    public function __construct(
        Context $context,
        PageFactory $pageFactory
    )
    {
        parent::__construct($context);
        $this->pageFactory = $pageFactory;
    }

    public function execute()
    {
        $page = $this->pageFactory->create();
        return $page;
    }
}

now we create a block file

app/code/VendorName/ModuleName/Block

Index.php

<?php

namespace VendorName\ModuleName\Block;

use Magento\Framework\View\Element\Template;

class Index extends Template
{

    public function __construct(
        Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }
    public function getNameshow()
    {
        $name = "hello i am come from block";
        return $name; 
    }
}

Now we add phtml file

app\code\VendorName\ModuleName\view\frontend\templates

salesperson.phtml

<h1>Template file for Frontend Module</h1>
<h2> <?php echo $block->getNameshow(); ?> </h2>

now last we add Layout file

app\code\VendorName\ModuleName\view\frontend\layout

salesperson_login_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="VendorName\ModuleName\Block\Index" name="show_phtml_data" template="VendorName_ModuleName::salesperson.phtml" />
        </referenceContainer>
    </body>
</page>

run commands

php bin/magento s:up
php bin/magento c:f
php bin/magento c:c 

After creating all the above steps, you called the URL as http://domainname.com/salesperson/login/index

if you have 404 page not found error then you have to enable your module VendorName_ModuleName.

And we will enable this module in this step

php bin/magento module:status

You should see the module is disable now:

List of disabled modules: VendorName_ModuleName

Follow exact guide to enable the module right now, let run the command as:

php bin/magento module:enable VendorName_ModuleName

After this step,

run commands

php bin/magento s:up
php bin/magento s:s:d -f 
php bin/magento c:f
php bin/magento c:c