วิธีการสร้างฟอร์มที่กำหนดเองในส่วนหน้าของ Magento2


19

ฉันต้องการสร้างแบบฟอร์มที่กำหนดเองในส่วนหน้าและการใช้แบบฟอร์มนี้ลูกค้าจะได้รับการนัดหมาย

ในรูปแบบของฉันฉันมี 4 ฟิลด์

  1. ชื่อ (ยื่นข้อความ)
  2. นามสกุล (ยื่นข้อความ)
  3. หมายเลขโทรศัพท์ (ฟิลด์ตัวเลข)
  4. จองเวลา (พร้อมปฏิทินวันที่)

ดังนั้นเมื่อลูกค้ากรอกแบบฟอร์มนี้และส่งฉันต้องการแทรกข้อมูลนี้ในฐานข้อมูลและแสดงในส่วนผู้ดูแลระบบ

ฉันจะใช้ฟังก์ชันนี้ใน Magento-2.1 ได้อย่างไร

ฉันได้อ้างอิงลิงค์นี้แต่มันไม่ได้เป็นไปตามหน้าที่การใช้งานของฉัน

คำตอบ:


41

Company/Moduleสมมติว่าคุณมีโมดูลดังต่อไปนี้

สร้างเราเตอร์ส่วนหน้า

/ app / รหัส / บริษัท / โมดูล / etc / frontend / route.xml

สร้างเส้นทางเพื่อจัดการ:

  • รับคำขอที่จะแสดงเทมเพลตฟอร์ม HTML
  • คำขอ POST ที่จะส่งข้อมูลแบบฟอร์มไปยัง Action Controller Class
<?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 / รหัส / บริษัท / โมดูล / ดู / 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 / รหัส / บริษัท / โมดูล / บล็อก / 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 / รหัส / บริษัท / โมดูล / ดู / ส่วนหน้า / แม่แบบ / 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>

สร้าง Action Controller

/ app / รหัส / บริษัท / โมดูล / ควบคุม / ดัชนี / Booking.php

สร้าง Action Controller เพื่อจัดการคำขอบนเส้นทาง

<?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
  | | | ├เป็นต้น
  | | | | ├ส่วนหน้า
  | | | | | ├ 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

ไม่แสดงอะไรเลยในส่วนหน้าฉันใช้ route.xml frontname แต่ถูกเปลี่ยนเส้นทางไปยังหน้า 404 ที่ไม่พบ
Naveenbos

ใช่ฉันได้ติดตามแล้วและการเปลี่ยนเส้นทางแสดง 404
Khushbu_sipl

2
โปรดจำไว้ว่าให้วางคอนโทรลเลอร์ของคุณในโฟลเดอร์ที่เรียกว่าดัชนี ฉันพยายามแล้วฉันก็มีหน้า 404 แต่เมื่อฉันไปที่ devdocs.magento.com และอ่านคำแนะนำมาตรฐานฉันจัดการเพื่อแก้ปัญหาของฉัน ฉันหวังว่านี่จะช่วยคุณได้
MazeStricks

1
@MartijnvanHoof หากคุณขยายโมดูลผู้ติดต่อให้แน่ใจว่าได้ทำตามสิ่งที่เป็นโครงสร้างไฟล์ของโมดูล และที่นั่นคุณสามารถขยายและสร้างตรรกะของคุณเอง
MazeStricks

0

จากการตอบสนองทางเลือกฉันเปลี่ยนบรรทัด if($post){เป็นif($post['firstname']){

ดังนั้นฉันสามารถดูแบบฟอร์มจากส่วนหน้าและคลิกเพื่อส่งไปยังการกระทำอื่น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.