Create the news list page via frontend in Magento 2

05 Oct 2015
We are happy to introduce you a series of tutorial on how to display data via frontend in Magento 2.This series is quite long then we will divide it into several parts.

Hi guys,

We are happy to introduce you a series of tutorial on how to display data via frontend in Magento 2. This series is quite long then we will divide it into several parts. We will continue using the Tutorial_SimpleNews module in the last post.

This is the summary after we finish this part:

- Create the news list page and list all data with pagination via frontend.

In order to understand this tutorial thoroughly, please review our last tutorials:

  1. How to create a simple module in Magento 2
  2. Create a module with custom database table in Magento 2
  3. How to use Model and Collection in Magento 2
  4. How to create the configuration via backend for a custom module
  5. Adding new menu item via backend in custom module
  6. Grid and Form in Magento 2 Admin Panel (Part 1)
  7. Grid and Form in Magento 2 Admin Panel (Part 2)

Ok, now let’s get started!

 

The first, we need to create Helper file, it will contain functions for getting the configuration values:

 

- Create file: app/code/Tutorial/SimpleNews/Helper/Data.php and insert this following code into it:

<?php

namespace Tutorial\SimpleNews\Helper;

use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\App\Helper\Context;
use Magento\Store\Model\ScopeInterface;

class Data extends AbstractHelper
{
   const XML_PATH_ENABLED      = 'simplenews/general/enable_in_frontend';
   const XML_PATH_HEAD_TITLE   = 'simplenews/general/head_title';
   const XML_PATH_LASTEST_NEWS = 'simplenews/general/lastest_news_block_position';

   /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $_scopeConfig;

    /**
     * @param Context $context
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
       Context $context,
       ScopeConfigInterface $scopeConfig
    ) {
       parent::__construct($context);
       $this->_scopeConfig = $scopeConfig;
    }

   /**
     * Check for module is enabled in frontend
     *
     * @return bool
     */
   public function isEnabledInFrontend($store = null)
   {
      return $this->_scopeConfig->getValue(
         self::XML_PATH_ENABLED,
         ScopeInterface::SCOPE_STORE
      );
   }

   /**
     * Get head title for news list page
     *
     * @return string
     */
   public function getHeadTitle()
   {
      return $this->_scopeConfig->getValue(
         self::XML_PATH_HEAD_TITLE,
         ScopeInterface::SCOPE_STORE
      );
   }

   /**
     * Get lastest news block position (Left, Right, Disabled)
     *
     * @return int
     */
   public function getLastestNewsBlockPosition()
   {
      return $this->_scopeConfig->getValue(
         self::XML_PATH_LASTEST_NEWS,
         ScopeInterface::SCOPE_STORE
      );
   }
}

 

Create the news list page

Step 1: Create layout files.

- Create file: app/code/Tutorial/SimpleNews/view/frontend/layout/news_news.xml (we will use this layout file as default in our module) and insert this following code into it:

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" 
xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/
Framework/View/Layout/etc/page_configuration.xsd">
   <head>
      <css src="Tutorial_SimpleNews::css/style.css" />
   </head>
</page>

 

- Create file: app/code/Tutorial/SimpleNews/view/frontend/layout/news_index_index.xml (this file will declare blocks for using in the news list page) and insert this following code into it:

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns"
xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/
Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="news_news" />
    <body>
        <referenceContainer name="content">
            <block class="Tutorial\SimpleNews\Block\NewsList"
                name="tutorial_simplenews_news_list"
                template="Tutorial_SimpleNews::list.phtml" />
        </referenceContainer>
    </body>
</page>

 

Step 2: Create block file.

- Create file: app/code/Tutorial/SimpleNews/Block/NewsList.php (this file will set the news data collection and declare pagination for them) and insert this following code into it:

<?php

namespace Tutorial\SimpleNews\Block;

use Magento\Framework\View\Element\Template;
use Tutorial\SimpleNews\Model\NewsFactory;

class NewsList extends Template
{
   /**
    * @var \Tutorial\SimpleNews\Model\NewsFactory
    */
   protected $_newsFactory;

   /**
    * @param Template\Context $context
    * @param NewsFactory $newsFactory
    * @param array $data
    */
   public function __construct(
      Template\Context $context,
      NewsFactory $newsFactory,
      array $data = []
   ) {
        $this->_newsFactory = $newsFactory;
        parent::__construct($context, $data);
   }

   /**
     * Set news collection
     */
    protected  function _construct()
    {
        parent::_construct();
        $collection = $this->_newsFactory->create()->getCollection()
            ->setOrder('id', 'DESC');
        $this->setCollection($collection);
    }

   /**
     * @return $this
     */
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
        /** @var \Magento\Theme\Block\Html\Pager */
        $pager = $this->getLayout()->createBlock(
           'Magento\Theme\Block\Html\Pager',
           'simplenews.news.list.pager'
        );
        $pager->setLimit(5)
            ->setShowAmounts(false)
            ->setCollection($this->getCollection());
        $this->setChild('pager', $pager);
        $this->getCollection()->load();

        return $this;
    }

   /**
     * @return string
     */
    public function getPagerHtml()
    {
        return $this->getChildHtml('pager');
    }
}

 

Step 3: Create template file.

- Create file: app/code/Tutorial/SimpleNews/view/frontend/templates/list.phtml (this file will set the news data collection and declare pagination for them) and insert this following code into it:

<div class="simplenews">
   <?php
      $newsCollection = $block->getCollection();
      if ($newsCollection->getSize() > 0) :
   ?>
      <div class="toolbar top">
         <?php echo $block->getPagerHtml(); ?>
      </div>

      <ul>
         <?php foreach ($newsCollection as $news) : ?>
            <li>
               <div class="simplenews-list">
                  <a class="news-title" href="<?php echo $this->getUrl('news/index/view',
 ['id' => $news->getId()]) ?>"><?php echo $news->getTitle() ?></a>
                  <div class="simplenews-list-content">
                     <?php echo $news->getSummary() ?>
                  </div>
               </div>
            </li>
         <?php endforeach; ?>
      </ul>

      <div style="clear: both"></div>

      <div class="toolbar-bottom">
         <div class="toolbar bottom">
            <?php echo $block->getPagerHtml(); ?>
         </div>
      </div>
   <?php else : ?>
      <p><?php echo __('Have no article!') ?></p>
   <?php endif; ?>
</div>

 

Step 4: Create controller files.

- Create file: app/code/Tutorial/SimpleNews/Controller/News.php and insert this following code into it:

<?php

namespace Tutorial\SimpleNews\Controller;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\View\Result\PageFactory;
use Tutorial\SimpleNews\Helper\Data;
use Tutorial\SimpleNews\Model\NewsFactory;

class News extends Action
{
   /**
    * @var \Magento\Framework\View\Result\PageFactory
    */
   protected $_pageFactory;

   /**
    * @var \Tutorial\SimpleNews\Helper\Data
    */
   protected $_dataHelper;

   /**
    * @var \Tutorial\SimpleNews\Model\NewsFactory
    */
   protected $_newsFactory;

   /**
    * @param Context $context
    * @param PageFactory $pageFactory
    * @param Data $dataHelper
    * @param NewsFactory $newsFactory
    */
   public function __construct(
      Context $context,
      PageFactory $pageFactory,
      Data $dataHelper,
      NewsFactory $newsFactory
   ) {
      parent::__construct($context);
      $this->_pageFactory = $pageFactory;
      $this->_dataHelper = $dataHelper;
      $this->_newsFactory = $newsFactory;
   }

   /**
     * Dispatch request
     *
     * @param RequestInterface $request
     * @return \Magento\Framework\App\ResponseInterface
     */
    public function dispatch(RequestInterface $request)
    {
       // Check this module is enabled in frontend
      if ($this->_dataHelper->isEnabledInFrontend()) {
         $result = parent::dispatch($request);
          return $result;
      } else {
         $this->_forward('noroute');
      }
    }
}

 

- Create file: app/code/Tutorial/SimpleNews/Controller/Index/Index.php and insert this following code into it:

<?php

namespace Tutorial\SimpleNews\Controller\Index;

use Tutorial\SimpleNews\Controller\News;

class Index extends News
{
    public function execute()
    {
        $pageFactory = $this->_pageFactory->create();

        // Add title which is got by the configuration via backend
        $pageFactory->getConfig()->getTitle()->set(
            $this->_dataHelper->getHeadTitle()
        );

        // Add breadcrumb
        /** @var \Magento\Theme\Block\Html\Breadcrumbs */
        $breadcrumbs = $pageFactory->getLayout()->getBlock('breadcrumbs');
        $breadcrumbs->addCrumb('home',
            [
                'label' => __('Home'),
                'title' => __('Home'),
                'link' => $this->_url->getUrl('')
            ]
        );
        $breadcrumbs->addCrumb('simplenews',
            [
                'label' => __('Simple News'),
                'title' => __('Simple News')
            ]
        );

        return $pageFactory;
    }
}

 

Step 5: Create CSS file.

- Create file: app/code/Tutorial/SimpleNews/view/frontend/web/css/style.css and insert this following code into it:

.simplenews > ul {
   list-style: none;
   padding: 0;
}
.simplenews > ul li {
   padding: 10px 5px;
   margin: 0;
   background-color: #fff;
   border-bottom: 1px #c4c1bc solid;
   display: inline-block;
   width: 100%;
}
.simplenews > ul li:last-child {
   border-bottom: none;
}
.simplenews-list {
   float: left;
   position: relative;
   margin-left: 10px;
   width: 100%;
}
.simplenews-list a.news-title {
   font-weight: bold;
}
.simplenews-list a.news-title:hover {
   text-decoration: none;
}
.block-simplenews .block-title {
   margin: 0px 0px 20px;
}
.block-simplenews-heading {
   font-size: 18px;
   font-weight: 300;
}

 

Ok, it’s done. You can see your result by accessing this url: http://yourdomain.com/news

 

That’s the first part of this tutorial series. See you again in the next part, in which I will introduce you how to create the news detail page.

Enjoy Magento 2 challenge with MageWorld ‘s tutorials! Follow our facebook fanpage for further discussion. 

Related Posts

Grid and Form in Magento 2 Admin Panel (Part 2)

Grid and Form in Magento 2 Admin Panel (Part 2)

25 Sep 2015
Today, I will continue introducing you how to create a Form via Magento 2 backend in custom module.
Grid and Form in Magento 2 Admin Panel (Part 1)

Grid and Form in Magento 2 Admin Panel (Part 1)

17 Sep 2015
In this 6th tutorial, I will introduce you how to create data grid and form via Magento 2 backend in custom module. This tutorial is quite long then we will divide it into several parts.
Adding new menu item in Magento 2 custom module

Adding new menu item in Magento 2 custom module

27 Aug 2015
Magento 2 is a great platform with lots of useful options and features. Sometimes the default options do not meet all the requirements of a project or a user's preferences. Therefore, by Adding a new menu item in Magento 2 custom module, you can implement it yourself to improve your Magento administration process.
How to create the configuration via backend for a custom module

How to create the configuration via backend for a custom module

21 Aug 2015
In this post, I will introduce you how to create the configurations via Magento 2 backend. We will continue using the Tutorial_SimpleNews module for this lesson.