Magento 2 create basic module frontend part 4

Qaisar Satti

7 years ago

As we finished with the basic module structure and admin part we move to Magento 2 create basic module frontend .Now this tutorial will be cover the create frontend router, create layout file, create frontend controller, create frontend block, add custom pagination. Now we start with frontend.

Create frontend router

Create routes.xml in following directory

QaisarSatti\HelloWorld\etc\frontend\

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="helloworld" frontName="helloworld">
<module name="QaisarSatti_HelloWorld" />
</route>
</router>
</config>

Create frontend controller

Create Index.php in following directory

QaisarSatti\HelloWorld\Controller\Index\

<?php
/**
* Hello World
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/
namespace QaisarSatti\HelloWorld\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action

{

public function execute()
{

$this->_view->loadLayout();
$this->_view->renderLayout();
}

}

Create layout file

Create helloworld_index_index.xml in following directory

QaisarSatti\HelloWorld\view\frontend\layout\

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="QaisarSatti\HelloWorld\Block\HelloWorld" name="HellosWorld" template="QaisarSatti_HelloWorld::HelloWorld.phtml"></block>
</referenceContainer>
</body>
</page>

Create frontend block

Create HelloWorld.php in following directory

QaisarSatti\HelloWorld\Block\

<?php
/**
* Hello World
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/

namespace QaisarSatti\HelloWorld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template
{
protected $_coreRegistry = null;
protected $_collectionFactory;
protected $_productsFactory;
protected $_helloworldFactory;
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Framework\Registry $registry,
\QaisarSatti\HelloWorld\Model\ResourceModel\HelloWorld\CollectionFactory $helloworldFactory,
array $data = []
) {

$this->_coreRegistry = $registry;
$this->_helloworldFactory = $helloworldFactory;
parent::__construct($context, $data);
}
public function getHelloCollection()
{
$page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
//get values of current limit
$pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 5;

$helloCollection = $this->_helloworldFactory->create();
$helloCollection->setPageSize($pageSize);
$helloCollection->setCurPage($page);
return $helloCollection;
}
public function _prepareLayout()
{

parent::_prepareLayout();
$this->pageConfig->getTitle()->set(__('Sample Post'));

if ($this->getHelloCollection()) {
$pager = $this->getLayout()->createBlock('Magento\Theme\Block\Html\Pager','qaisarsatti.blog.pager')->setAvailableLimit(array(5=>5,10=>10,15=>15,20=>20));
$pager->setShowPerPage(true);
$pager->setCollection($this->getHelloCollection());
$this->setChild('pager', $pager);
$this->getHelloCollection()->load();
}
return $this;
}
public function getPagerHtml(){
return $this->getChildHtml('pager');
}

}

Create frontend phtml

Create HelloWorld.phtml in following directory

QaisarSatti\HelloWorld\view\frontend\templates\

<?php
/**
* Hello World
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email qaisarssatti@gmail.com
*
*/
$blogCollection = $block->getHelloCollection();
foreach ($blogCollection as $blog) {

echo $blog->getTitle().'<br />';
echo '     '.$blog->getContent().'<br />';
}

if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom">
<?php echo $block->getPagerHtml(); ?>
</div>
<?php endif ?>