如何在Magento2前端中创建自定义表单?


19

我想在前端创建一个自定义表单,使用此表单客户可以预约。

在我的表格中,我有4个字段。

  1. 名(文本)
  2. 姓氏(已归档文本)
  3. 电话号码(数字字段)
  4. 预约时间(带日期时间日历)

因此,当客户填写此表单并提交时,我想将此数据插入数据库并在admin部分中显示。

如何在Magento-2.1中实现此功能

我已经引用了链接,但是它不是按照我的功能。

Answers:


41

假设您具有以下模块Company/Module

创建前端路由器

/ app / code / Company / Module / etc / frontend / routes.xml

创建管理路线:

  • GET请求将显示HTML表单模板
  • POST请求,该请求将表单数据发送到动作控制器类。
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="companymodule" frontName="companymodule">
            <module name="Company_Module"/>
        </route>
    </router>
</config>

创建布局

/ app / code / Company / Module / view / frontend / layout / module_index_booking.xml

创建一个基本布局,将“块”关联到表单页面phtml模板

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>HTML title - The booking form page</title>
    </head>
    <body>
        <referenceBlock name="navigation.sections" remove="true" />
        <referenceContainer name="content">
            <block class="Company\Module\Block\Booking" name="companymodule.booking" template="Company_Module::booking.phtml"/>
        </referenceContainer>
    </body>
</page>

创建块

/ app / code / Company / Module / Block / Booking.php

创建一个具有许多您想要的表单功能的块。

<?php

namespace Company\Module\Block;

class Booking extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template $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 '/companymodule/controller_name/action';
        // here controller_name is index, action is booking
    }
}

创建模板

/ app / code / Company / Module / view / frontend / templates / booking.phtml

使用您的HTML表单创建一个模板,并添加与路由相对应的表单操作。

<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>

创建动作控制器

/ app / code / Company / Module / Controller / Index / Booking.php

创建一个动作控制器来管理路径上的请求。

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Booking 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('/companymodule/index/booking');

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

在恢复时,您将具有以下架构:

应用程式
  ├代码
  | ├公司
  | | ├模块
  | | | ├座
  | | | | ├Booking.php
  | | | ├控制器
  | | | | ├索引
  | | | | | ├Booking.php
  | | | ├等
  | | | | ├前端
  | | | | | ├routes.xml
  | | | ├查看
  | | | | ├前端
  | | | | | ├布局
  | | | | | | ├module_index_booking.xml
  | | | | | ├模板
  | | | | | | ├booking.phtml

然后运行以下命令:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

然后,您可以访问自定义表单页面:http:// localhost / companymodule / index / booking

编码愉快!


我怎么看这是在前端?
Naveenbos

没有在前端显示任何内容,我使用了route.xml frontname,但是它被重定向到404 not found页面
Naveenbos

是的,我也遵循同样的方法,并且重定向显示404
Khushbu_sipl,2016年

2
请注意将控制器放置在名为index的文件夹中。我已经尝试过了,但是我得到了404页。但是当我访问devdocs.magento.com并阅读标准说明时,我设法解决了问题。我希望这能帮到您。
MazeStricks

1
@MartijnvanHoof如果扩展联系人供应商模块,请确保遵循该模块的文件结构。在这里您可以扩展并创建自己的逻辑。
MazeStricks

0

从选择响应中,我将行更改 if($post){if($post['firstname']){

这样我就可以从前端看到表单,然后单击以发送到另一个操作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.