Page keeps blank when creating a custom form. Controller and routes are set up correctly

Question

I was following this but unfortunately, the form does not show up. Here is my complete module:

Mageplaze/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="Mageplaza_HelloWorld" setup_version="1.0.0">
    </module>
</config>

Mageplaze/HelloWorld/registration.php

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

Mageplaza/HelloWorld/Block/Index.php

<?php

namespace Mageplaza\HelloWorld\Block;
class Index extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
    }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        // companymodule is given in routes.xml
        // controller_name is folder name inside controller folder
        // action is php file name inside above controller_name folder

        return '/helloworld/index/index';
        // here controller_name is index, action is booking
    }
}

Mageplaza/HelloWorld/Controller/Index/Index.php

<?php

namespace Mageplaza\HelloWorld\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Index extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array)$this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname = $post['firstname'];
            $lastname = $post['lastname'];
            $phone = $post['phone'];
            $bookingTime = $post['bookingTime'];

            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/hellworld/index/index');

            return $resultRedirect;
        }
        // 2. GET request : Render the booking page
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}

Mageplaza/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 frontName="helloworld" id="helloworld">
            <module name="Mageplaza_HelloWorld"/>
        </route>
    </router>
</config>

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Mageplaza\HelloWorld\Block\Index" name="helloworld_index_index"
               template="Mageplaza_HelloWorld::index.phtml"/>
    </referenceContainer>
</page>

Mageplaza/HelloWorld/view/frontend/templates/index.phtml

<h2>Welcome to Mageplaza.com</h2>
<h1>Booking page</h1>

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="phone" type="text">
    <input name="bookingTime" type="date">
    <input type="submit" value="Send booking informations">
</form>

What happens? When opening the page mysite.com/helloworld/index/index Layout keeps blank. (Just the layout keeps blank. Rest of the site like header, menu footer works).

---

What I tried? I was making sure that the controller and routes are correct. If I change following files to this:

Mageplaza/HelloWorld/Controller/Index/Index.php

<?php

namespace Mageplaza\HelloWorld\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $pageFactory)
    {
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);
    }

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

Mageplaza/HelloWorld/Block/Index.php

<?php

namespace Mageplaza\HelloWorld\Block;
class Index extends \Magento\Framework\View\Element\Template
{

}

Mageplaza/HelloWorld/view/frontend/templates/index.phtml

<h2>Welcome to Mageplaza.com</h2>

Then output is as expected: Welcome to Mageplaza.com

So the error must be in either /Controller/Index/Index.php, /Block/Index.php or /view/frontend/templates/index.phtml.

That's at least what I think!?

Could anybody help me with this? Thanks

Answer 1

So the flow is: Controller -> Layout -> Block -> Template

1. First, you put the code into Controller, something like echo 123; die;, visit the route to check if your controller is working
2. Now that the controller is working, put the same debug code to your block, you can use one of these _prepareLayout or _toHtml
3. Now for the template, at the very first line of the template, put <?= 123; die ?>
4. If these above steps are working, do one more to make sure your template is using the correct $block, by putting echo get_class($block) in your template

I hope you get the idea how to debug the code now, you follow step by step in the flow. Let's say you've done all the above but your form is not working, then you need to check where you output the action, does your form's element has name attribute`...