Magento2フロントエンドでカスタムフォームを作成する方法


19

フロントエンドでカスタムフォームを作成し、このフォームを使用して顧客が予約を取得できるようにします。

私のフォームには、4つのフィールドがあります。

  1. 名(提出されたテキスト)
  2. 姓(提出されたテキスト)
  3. 電話番号(数値フィールド)
  4. 時刻の予約(日付時刻カレンダー付き)

したがって、顧客がこのフォームに記入して送信するときに、このデータをデータベースに挿入し、管理セクションに表示したいと思います。

Magento-2.1でこの機能を実現するにはどうすればよいですか

私はこのリンクを参照しましたが、それは私の機能によるものではありません。

回答:


41

次のモジュールがあると仮定しますCompany/Module

フロントエンドルーターを作成する

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

管理するルートを作成します。

  • HTMLフォームテンプレートを表示するGETリクエスト
  • フォームデータをアクションコントローラークラスに送信する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

ハッピーコーディング!


これがフロントエンドにあることをどのように確認できますか?
ナビーエンボス16

フロントエンドでは何も表示されない、私はroutes.xml frontnameを使用しますが、それは404ページが見つかりませんにリダイレクトされる
Naveenbos

はい、私は同じに従った、及びリダイレクションショー404
Khushbu_sipl

2
indexというフォルダーにコントローラーを配置することに注意してください。私も試してみましたが、404ページも取得しました。しかし、devdocs.magento.comにアクセスし、標準の手順を読んで、問題を解決できました。これがお役に立てば幸いです。
-MazeStricks

1
@MartijnvanHoof連絡先ベンダーモジュールを拡張する場合は、モジュールのファイル構造を確認してください。そこで、独自のロジックを拡張および作成できます。
MazeStricks

0

選択応答から、行 if($post){if($post['firstname']){

そのため、フロントエンドからフォームを確認し、クリックして別のアクションに送信できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.