1

Could you please help me how to create a form and save that data in database in magento 2?

closed as too broad by 7ochem, Jai, Manoj Deswal, sv3n, Priyank Apr 17 '18 at 8:46

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Do you want to create form on frontend side? – Kazim Noorani Apr 16 '18 at 10:02
  • Yes, both UI & Server side.. If I save data, it should also save in DB – ammanchipavan Apr 16 '18 at 10:10
8

Assuming we are creating new module Company/Module.

Defining the module

/app/code/Company/Module/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Company_Module" setup_version="1.0.0">
</module>

Module registration

/app/code/Company/Module/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Company_Module',
__DIR__
);

Create the frontend router

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

Create a route for manage :

  • GET request wich going to display HTML form template
  • POST request wich going to send form data to 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>

Create the layout

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

Create a basic layout for associate the Block to the form page phtml template

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

Create the Block

/app/code/Company/Module/Block/Booking.php

Create a block with many functions you want for your form.

<?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\Backend\Block\Template\Context $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
    }
}

Create the template

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

Create a template with your HTML form and add the form action corresponding to the routing.

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

Create the Action Controller

/app/code/Company/Module/Controller/Index/Booking.php

Create an Action Controller for manage the requests on the route.

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

In resuming you will must have the following architecture :

app
  ├ code
  |   ├ Company
  |   |   ├ Module
  |   |   |   ├ Block
  |   |   |   |   ├ Booking.php
  |   |   |   ├ Controller
  |   |   |   |   ├ Index
  |   |   |   |   |   ├ Booking.php
  |   |   |   ├ etc
  |   |   |   |   ├ frontend
  |   |   |   |   |   ├ routes.xml
  |   |   |   ├ view
  |   |   |   |   ├ frontend
  |   |   |   |   |   ├ layout
  |   |   |   |   |   |   ├ module_index_booking.xml
  |   |   |   |   |   ├ templates
  |   |   |   |   |   |   ├ booking.phtml

Then run following commands :

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

Then you can access to your custom form page : http://localhost/companymodule/index/booking

Happy coding!

  • In which table it is saving the data ? – Flutterer Sep 25 '18 at 12:20
  • It is just an overall example of creating module. I have not saved data in any table neither I have created any table in this above module code. @samairali – Kazim Noorani Sep 26 '18 at 6:02
  • ok . :) can you tell me specifically how can i add data to specific table ? i am trying to learn it but not getting enough resources . – Flutterer Sep 26 '18 at 6:41
  • This could really help you. Please refer, mageplaza.com/magento-2-module-development/… – Kazim Noorani Sep 26 '18 at 6:47
1

You need to read steps how to create modules in magento2. I suggest this URL for you.

All guidelines are at this URL Please check. https://www.mageplaza.com/magento-2-module-development/

Not the answer you're looking for? Browse other questions tagged or ask your own question.