3

How can I create a frontend form and save that data in a database in Magento 2?

asked Apr 16, 2018 at 10:01
2
  • Do you want to create form on frontend side? Commented Apr 16, 2018 at 10:02
  • Yes, both UI & Server side.. If I save data, it should also save in DB Commented Apr 16, 2018 at 10:10

2 Answers 2

11

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 $this->getUrl('companymodule/controller_name/action', ['_secure' => true]);
 // 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!

answered Apr 16, 2018 at 10:22
6
  • 1
    In which table it is saving the data ? Commented Sep 25, 2018 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 Commented Sep 26, 2018 at 6:02
  • 1
    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 . Commented Sep 26, 2018 at 6:41
  • This could really help you. Please refer, mageplaza.com/magento-2-module-development/… Commented Sep 26, 2018 at 6:47
  • 1
    downvoted, because you answered it partially Commented Sep 22, 2020 at 11:22
1

You need to read the steps Below reference link on how to create modules in magento2.

All guidelines are this -> click here

Msquare
9,4627 gold badges30 silver badges71 bronze badges
answered Apr 16, 2018 at 10:16

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.