Comment créer un formulaire personnalisé dans Magento2 Frontend?

19

Je veux créer un formulaire personnalisé en frontend et en utilisant ce formulaire, le client peut obtenir un rendez-vous.

Dans ma forme, j'ai 4 champs.

  1. Prénom (texte déposé)
  2. Nom (texte déposé)
  3. Numéro de téléphone (champ numérique)
  4. Réservation d'une heure (avec calendrier date-heure)

Ainsi, lorsqu'un client remplit ce formulaire et le soumet, je souhaite insérer ces données dans la base de données et les afficher dans la section d'administration.

Comment puis-je obtenir cette fonctionnalité dans Magento-2.1

J'ai référé ce lien mais ce n'est pas selon mes fonctionnalités.

Dhaval
la source

Réponses:

41

En supposant que vous ayez le module suivant Company/Module.

Créer le routeur frontal

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

Créez un itinéraire à gérer:

  • Demande GET qui va afficher le modèle de formulaire HTML
  • Demande POST qui va envoyer des données de formulaire à 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>

Créer la mise en page

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

Créer une mise en page de base pour associer le bloc au modèle phtml de page de formulaire

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

Créer le bloc

/ app / code / Entreprise / Module / Bloquer / Booking.php

Créez un bloc avec de nombreuses fonctions que vous souhaitez pour votre formulaire.

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

Créez le modèle

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

Créez un modèle avec votre formulaire HTML et ajoutez l'action de formulaire correspondant au routage.

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

Créer le contrôleur d'action

/ app / code / Entreprise / Module / Contrôleur / Index / Booking.php

Créez un contrôleur d'action pour gérer les demandes sur l'itinéraire.

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

En reprenant, vous aurez l'architecture suivante:

app
  ├ code
  | ├ Entreprise
  | | ├ Module
  | | | ├ Bloquer
  | | | | ├ Booking.php
  | | | ├ Contrôleur
  | | | | ├ Index
  | | | | | ├ Booking.php
  | | | ├ etc
  | | | | ├ frontend
  | | | | | ├ routes.xml
  | | | ├ voir
  | | | | ├ frontend
  | | | | | ├ mise en page
  | | | | | | ├ module_index_booking.xml
  | | | | | ├ modèles
  | | | | | | ├ booking.phtml

Exécutez ensuite les commandes suivantes:

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

Ensuite, vous pouvez accéder à votre page de formulaire personnalisé: http: // localhost / companymodule / index / booking

Bon codage!

Antoine Subit
la source
comment puis-je voir que c'est en face avant?
Naveenbos
N'affichant rien dans le frontal, j'ai utilisé frontname routes.xml, mais il redirige vers la page 404 introuvable
Naveenbos
Oui, j'ai suivi la même chose, et la redirection montre 404
Khushbu_sipl
2
Veuillez prendre note de placer votre contrôleur dans un dossier appelé index. Je l'ai essayé aussi, j'ai eu 404 pages. Mais en visitant devdocs.magento.com et en lisant les instructions standard, j'ai réussi à résoudre mon problème. J'espère que cela t'aidera.
MazeStricks
1
@MartijnvanHoof Si vous étendez le module du fournisseur de contact, assurez-vous de suivre la structure de fichiers du module. et là, vous pouvez étendre et créer votre propre logique.
MazeStricks
0

De la réponse de choix, je change la ligne if($post){enif($post['firstname']){

Et donc je peux voir le formulaire depuis le frontend et faire un clic pour l'envoyer à une autre action.

user60037
la source