How can I create a frontend form and save that data in a database in Magento 2?
-
Do you want to create form on frontend side?– Kazim NooraniApr 16, 2018 at 10:02
-
Yes, both UI & Server side.. If I save data, it should also save in DB– user2729721Apr 16, 2018 at 10:10
Add a comment
|
2 Answers
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
-
1
-
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 Sep 26, 2018 at 6:02
-
1ok . :) can you tell me specifically how can i add data to specific table ? i am trying to learn it but not getting enough resources . Sep 26, 2018 at 6:41
-
This could really help you. Please refer, mageplaza.com/magento-2-module-development/… Sep 26, 2018 at 6:47
-
1
You need to read the steps Below reference link on how to create modules in magento2.
All guidelines are this -> click here
