Magento2 Kullanıcı Arayüzünde Özel Form Nasıl Oluşturulur?


19

Ön uçta özel bir form oluşturmak istiyorum ve bu formu kullanarak müşteri randevu alabilir.

Formumda 4 Alanım var.

  1. Adı (metin dosyalandı)
  2. Soyadı (metin dosyalandı)
  3. Telefon No. (sayısal alan)
  4. Zaman ayırma (tarih zaman takvimi ile)

Dolayısıyla, bir müşteri bu formu doldurduğunda ve gönderdiğinde, bu verileri veritabanına eklemek ve yönetici bölümünde göstermek istiyorum.

Magento-2.1'de bu işlevselliği nasıl elde edebilirim

Bu bağlantıdan bahsettim, ancak işlevselliğime göre değil.

Yanıtlar:


41

Aşağıdaki modüle sahip olduğunuzu varsayarsak Company/Module.

Ön uç yönlendiriciyi oluşturma

/ app / code / Şirket / Modül / etc / frontend / route.xml

Yönetmek için bir rota oluşturun:

  • HTML form şablonunu görüntüleyecek isteği AL
  • Action Controller Class'a form verileri gönderecek POST isteği.
<?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>

Düzeni oluşturun

/ app / code / Şirket / Modül / görünüm / kullanıcı arabirimi / düzen / module_index_booking.xml

Bloğu form sayfası phtml şablonuyla ilişkilendirmek için temel bir düzen oluşturun

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

Bloğu Oluşturun

/ app / code / Şirket / Modül / Blok / Booking.php

Formunuz için istediğiniz birçok işleve sahip bir blok oluşturun.

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

Şablonu oluşturun

/ app / code / Şirket / Modül / görünüm / kullanıcı arabirimi / şablonlar / booking.phtml

HTML formunuzla bir şablon oluşturun ve yönlendirmeye karşılık gelen form eylemini ekleyin.

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

Eylem Denetleyicisini Oluşturma

/ app / code / Şirket / Modül / Denetleyici / Dizin / Booking.php

Rotadaki istekleri yönetmek için bir Eylem Denetleyicisi oluşturun.

<?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();
    }
}

Devam ettirirken aşağıdaki mimariye sahip olacaksınız:

Uygulamanın
  ├ kod
  | ├ Şirket
  | | ├ Modül
  | | | ├ Engelle
  | | | | ├ Booking.php
  | | | ├ Denetleyici
  | | | | ├ Dizin
  | | | | | ├ Booking.php
  | | | ├ vb.
  | | | | ├ kullanıcı arabirimi
  | | | | | ├ route.xml
  | | | ├ görüntüle
  | | | | ├ kullanıcı arabirimi
  | | | | | ├ düzen
  | | | | | | ├ module_index_booking.xml
  | | | | | ├ şablonlar
  | | | | | | ├ booking.phtml

Ardından aşağıdaki komutları çalıştırın:

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

Ardından özel form sayfanıza erişebilirsiniz: http: // localhost / companymodule / index / booking

Mutlu kodlama!


bunun ön uçta olduğunu nasıl görebilirim?
Naveenbos

Ön uçta hiçbir şey göstermiyorum, route.xml ön adı kullandım, ancak 404 bulunamadı sayfasına yönlendiriliyor
Naveenbos

Evet, aynısını takip ettim ve yönlendirme 404
Khushbu_sipl

2
Denetleyicinizi index adlı bir klasöre yerleştirmek için lütfen not alın. Ben de denedim 404 sayfa var. Ancak devdocs.magento.com adresini ziyaret ettiğimde ve standart talimatları okuduğumda sorunumu çözmeyi başardım. Umarım bu sana yardımcı olmuştur.
MazeStricks

1
@MartijnvanHoof İletişim satıcı modülünü genişletirseniz, modülün dosya yapısını takip ettiğinizden emin olun. ve orada kendi mantığınızı genişletebilir ve oluşturabilirsiniz.
MazeStricks

0

Seçim yanıtı itibaren ben çizgiyi değiştirmek if($post){içinif($post['firstname']){

Ve böylece formu ön uçtan görebiliyorum ve başka bir eyleme göndermek için bir tıklama yapıyorum.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.