Magento2 Frontend에서 사용자 지정 양식을 만드는 방법은 무엇입니까?


19

프런트 엔드에서 사용자 지정 양식을 만들고 싶습니다.이 양식을 사용하면 고객이 약속을 잡을 수 있습니다.

내 양식에는 4 개의 필드가 있습니다.

  1. 이름 (텍스트 파일)
  2. 성 (텍스트 제출)
  3. 전화 번호 (숫자 필드)
  4. 시간 예약 (날짜 시간 달력 포함)

따라서 고객이이 양식을 작성하고 제출하면이 데이터를 데이터베이스에 삽입하고 관리 섹션에 표시하려고합니다.

Magento-2.1에서이 기능을 어떻게 달성 할 수 있습니까?

링크를 언급 했지만 기능에 따라 다릅니다.

답변:


41

다음 모듈이 있다고 가정합니다 Company/Module.

프런트 엔드 라우터 만들기

/ 응용 프로그램 / 코드 / 회사 소개 / 모듈 / 기타 / 프론트 엔드 / 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 / 회사 / 모듈 / 컨트롤러 / 인덱스 /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();
    }
}

다시 시작하면 다음과 같은 아키텍처가 있습니다.

앱
  ├ 코드
  | ├ 회사
  | | ├ 모듈
  | | | ├ 블록
  | | | | ing Booking.php
  | | | ├ 컨트롤러
  | | | | ├ 색인
  | | | | | ing Booking.php
  | | | ├ 등
  | | | | 프론트 엔드
  | | | | | ├ route.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

프론트 엔드에 아무것도 표시하지 않고, routes.xml frontname을 사용했지만 404 찾을 수 없음 페이지로 리디렉션됩니다
Naveenbos

예,이 같은 따랐다 및 재 프로그램 (404)
Khushbu_sipl

2
컨트롤러를 index라는 폴더에 배치하십시오. 나는 또한 404 페이지를 얻었습니다. 그러나 devdocs.magento.com을 방문하여 표준 지침을 읽으면서 문제를 해결할 수있었습니다. 이것이 도움이되기를 바랍니다.
MazeStricks 2016 년

1
@MartijnvanHoof 접촉 공급 업체 모듈을 확장하는 경우 모듈의 파일 구조를 따르십시오. 거기에서 자신 만의 논리를 확장하고 만들 수 있습니다.
MazeStricks

0

선택 응답에서 줄 if($post){을 다음으로 변경합니다. if($post['firstname']){

프런트 엔드에서 양식을보고 클릭하여 다른 작업으로 보낼 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.