For now, you will have to directly browse the page. But in the next blog, we will add menus for this page.<\/p>\n\n\n\n
So let’s create the controller file, Controller\/Index\/Index.php<\/em><\/p>\n\n\n\n Code for Controller\/Index\/Index.php<\/em> file<\/p>\n\n\n\n One thing to note here is that we have extended \\Magento\\Framework\\App\\Action\\Action<\/strong> and not the customer abstract account. <\/p>\n\n\n\n That’s because this page will be accessible to guest users also.<\/p>\n\n\n\n Now the next step is to create the layout file view\/frontend\/layout\/blogmanager_index_index.xml<\/em><\/p>\n\n\n\n Code for view\/frontend\/layout\/blogmanager_index_index.xml<\/em> file<\/p>\n\n\n\n Note here we have used layout=”1column”<\/strong> instead of the 2column layout pattern. <\/p>\n\n\n\n Also, we have not used the update handle code here because that was required to load the base structure of customer account pages. <\/p>\n\n\n\n And we have added the CSS node which will load the style file.<\/p>\n\n\n\n Let’s create the template file now view\/frontend\/templates\/published\/list.phtml<\/em><\/p>\n\n\n\n Code for view\/frontend\/templates\/published\/list.phtml<\/em> file<\/p>\n\n\n\n We have loaded all the blogs with the getCollection<\/strong> method, which we will create in the block. <\/p>\n\n\n\n Then we looped over each blog to show data about them.<\/p>\n\n\n\n We have added links to view the blog page which we will create in the next blogs. <\/p>\n\n\n\n Also, we have used getFormattedDate<\/strong> and getAuthor<\/strong> which we will create in block. <\/p>\n\n\n\n We have displayed the first 100 characters of blog content.<\/p>\n\n\n\n Also, we have called getPagerHtml<\/strong> to get the pagination when we have lots of blogs. <\/p>\n\n\n\n Now let’s see the block class Block\/Published\/BlogList.php<\/em><\/p>\n\n\n\n Code for Block\/Published\/BlogList.php<\/em> file<\/p>\n\n\n\n There are multiple things to notice here. First, we loaded the blogs based on status and sorted them by created date in the getCollection<\/strong> method. <\/p>\n\n\n\n After loading it we have set the collection in $this->blogList<\/strong> field variable. <\/p>\n\n\n\n if (!$this->blogList)<\/strong> this ensures that we load the collection only once for a page load. <\/p>\n\n\n\n Because if you see we have called the getCollection<\/strong> multiple times in _prepareLayout<\/strong> and also in the template file.<\/p>\n\n\n\n So it will ensure that we load the collection only once and save the data for future function calls.<\/p>\n\n\n\n We need the _prepareLayout<\/strong> function so that the pagination works. <\/p>\n\n\n\n Because we have not created code for the pager but used Magento’s pagination.<\/p>\n\n\n\n In getPagerHtml<\/strong>, we have called for a child html called pager<\/strong>. <\/p>\n\n\n\n This will be responsible for showing the pager based on the collection that we provide in prepare layout function.<\/p>\n\n\n\n The getAuthor<\/strong> is used to get the author’s name based on the id. We have loaded the customer model and got the name.<\/p>\n\n\n\n If the id is 0 or if the customer with that id does not exist then it will return ‘Admin’.<\/p>\n\n\n\n For formatting dates, I have created a function getFormattedDate<\/strong> which again calls a function of the same from the helper. <\/p>\n\n\n\n We will create this function in Helper.<\/p>\n\n\n\n Now let’s edit the helper class Helper\/Data.php<\/em><\/p>\n\n\n\n Updated code for Helper\/Data.php<\/em> file<\/p>\n\n\n\n Here we have just added the function to format date.<\/p>\n\n\n\n We also need to do some styling so that the page looks good. So let’s edit the view\/frontend\/web\/css\/style.css<\/em><\/p>\n\n\n\n Now when you browse the URL. You should see all the blogs as shown below,<\/p>\n\n\n\n Also, you can see the pagination at the bottom,<\/p>\n\n\n\n Next Blog -> Magento 2 Development 27: Front-end Menus<\/a><\/p>\n\n\n\n Previous Blog ->\u00a0Magento 2 Development 25: Helper<\/a><\/p>\n\n\n\n Furthermore, there is no necessity to look beyond this point; take advantage of the opportunity to initiate your projects with the recommended\u00a0Magento 2 development company<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<?php\nnamespace Webkul\\BlogManager\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends \\Magento\\Framework\\App\\Action\\Action\n{\n \/**\n * @var Magento\\Framework\\View\\Result\\PageFactory\n *\/\n protected $resultPageFactory;\n\n \/**\n * Dependency Initilization\n *\n * @param Context $context\n * @param PageFactory $resultPageFactory\n *\/\n public function __construct(\n Context $context,\n\t PageFactory $resultPageFactory\n ) {\n\t $this->resultPageFactory = $resultPageFactory;\n parent::__construct($context);\n }\n\n \/**\n * Provides content\n *\n * @return \\Magento\\Framework\\View\\Result\\Page\n *\/\n public function execute()\n {\n $resultPage = $this->resultPageFactory->create();\n $resultPage->getConfig()->getTitle()->set(__('Blogs'));\n $layout = $resultPage->getLayout();\n return $resultPage;\n }\n}<\/pre>\n\n\n\n<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <head>\n\t\t<css src="Webkul_BlogManager::css\/style.css"\/>\n\t<\/head>\n <body>\n <referenceContainer name="content">\n <block class="Webkul\\BlogManager\\Block\\Published\\BlogList" name="blogmanager.blog.published.list" template="Webkul_BlogManager::published\/list.phtml" \/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?php \n$blogs = $block->getCollection();\n?>\n<div class="blog-collection-wrapper">\n <div class="blog-published">\n <?php\n foreach ($blogs as $blog) { ?>\n <div class="blog-item">\n <div class="blog-item-title">\n <a href="<?= $escaper->escapeUrl($block->getUrl('blog\/index\/view', ['id'=>$escaper->escapeHtml($blog->getId())]))?>"><?= $escaper->escapeHtml($blog->getTitle()); ?><\/a>\n <\/div>\n <div class="blog-item-details">\n <div><?= __("Created At:").' '.$escaper->escapeHtml($block->getFormattedDate($escaper->escapeHtml($blog->getCreatedAt()))); ?><\/div>\n <div><?= __("Author:").' '.$block->getAuthor($blog->getUserId()); ?><\/div>\n <\/div>\n <div class="blog-item-content">\n <?= strlen($escaper->escapeHtml($blog->getContent()))<100 ? $escaper->escapeHtml($blog->getContent()) : substr($escaper->escapeHtml($blog->getContent()),0,100).'...'; ?>\n <div class="blog-item-view">\n <a href="<?= $escaper->escapeUrl($block->getUrl('blog\/index\/view', ['id'=>$escaper->escapeHtml($blog->getId())]))?>"><?= __('view'); ?><\/a>\n <\/div>\n <\/div>\n <\/div>\n <?php\n } ?>\n <?= $block->getPagerHtml(); ?>\n <\/div>\n<\/div><\/pre>\n\n\n\n<?php\nnamespace Webkul\\BlogManager\\Block\\Published;\n\nclass BlogList extends \\Magento\\Framework\\View\\Element\\Template\n{\n \/**\n * @var \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\CollectionFactory\n *\/\n protected $blogCollection;\n\n \/**\n * @var \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\Collection\n *\/\n protected $blogList;\n\n \/**\n * @var \\Webkul\\BlogManager\\Helper\\Data\n *\/\n protected $helper;\n\n \/**\n * @var \\Magento\\Customer\\Model\\CustomerFactory\n *\/\n protected $customerFactory;\n\n \/**\n * Dependency Initilization\n *\n * @param \\Magento\\Framework\\View\\Element\\Template\\Context $context\n * @param \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\CollectionFactory $blogCollection\n * @param \\Webkul\\BlogManager\\Helper\\Data $helper\n * @param \\Magento\\Customer\\Model\\CustomerFactory $customerFactory\n * @param array $data\n *\/\n public function __construct(\n \\Magento\\Framework\\View\\Element\\Template\\Context $context,\n \\Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\CollectionFactory $blogCollection,\n \\Webkul\\BlogManager\\Helper\\Data $helper,\n \\Magento\\Customer\\Model\\CustomerFactory $customerFactory,\n array $data = []\n ) {\n $this->helper = $helper;\n $this->blogCollection = $blogCollection;\n $this->customerFactory = $customerFactory;\n parent::__construct($context, $data);\n }\n\n \/**\n * Get Blog Collection\n *\n * @return Webkul\\BlogManager\\Model\\ResourceModel\\Blog\\Collection\n *\/\n public function getCollection()\n {\n if (!$this->blogList) {\n $collection = $this->blogCollection->create();\n $collection->addFieldToFilter('status', 1);\n $collection->setOrder('created_at', 'DESC');\n $this->blogList = $collection;\n }\n return $this->blogList;\n }\n\n \/**\n * Prepare Layout\n *\n * @return this\n *\/\n protected function _prepareLayout()\n {\n parent::_prepareLayout();\n if ($this->getCollection()) {\n $pager = $this->getLayout()->createBlock(\n \\Magento\\Theme\\Block\\Html\\Pager::class,\n 'blogmanager.publishedblog.pager'\n )\n ->setCollection(\n $this->getCollection()\n );\n $this->setChild('pager', $pager);\n $this->getCollection()->load();\n }\n return $this;\n }\n\n \/**\n * Get Pager Html\n *\n * @return void\n *\/\n public function getPagerHtml()\n {\n return $this->getChildHtml('pager');\n }\n\n \/**\n * Get Author Name\n *\n * @param int $userId\n * @return string\n *\/\n public function getAuthor($userId)\n {\n if ($userId) {\n $customer = $this->customerFactory->create()->load($userId);\n if ($customer && $customer->getId()) {\n return $customer->getName();\n }\n }\n return __('Admin');\n }\n\n \/**\n * Get Formatted Date\n *\n * @param string $date\n * @return date\n *\/\n public function getFormattedDate($date)\n {\n return $this->helper->getFormattedDate($date);\n }\n}<\/pre>\n\n\n\n<?php\nnamespace Webkul\\BlogManager\\Helper;\n\nuse Magento\\Customer\\Model\\Session;\n\nclass Data extends \\Magento\\Framework\\App\\Helper\\AbstractHelper\n{\n \/**\n * @var Magento\\Customer\\Model\\Session\n *\/\n protected $customerSession;\n\n \/**\n * @var \\Magento\\Framework\\Stdlib\\DateTime\\TimezoneInterface\n *\/\n protected $date;\n \n \/**\n * Dependency Initilization\n *\n * @param Session $customerSession\n * @param \\Magento\\Framework\\Stdlib\\DateTime\\TimezoneInterface $date\n * @param \\Magento\\Framework\\App\\Helper\\Context $context\n *\/\n public function __construct(\n Session $customerSession,\n \\Magento\\Framework\\Stdlib\\DateTime\\TimezoneInterface $date,\n \\Magento\\Framework\\App\\Helper\\Context $context\n ) {\n $this->customerSession = $customerSession;\n $this->date = $date;\n parent::__construct($context);\n }\n\n \/**\n * Get Customer Id\n *\n * @return int\n *\/\n public function getCustomerId()\n {\n $customerId = $this->customerSession->getCustomerId();\n return $customerId;\n }\n\n \/**\n * Get Formatted Date\n *\n * @param string $date\n * @return date\n *\/\n public function getFormattedDate($date='')\n {\n return $this->date->date($date)->format('d\/m\/y h:i A');\n }\n}<\/pre>\n\n\n\n.blog-form .blog-form-field-container {\n margin: 15px auto;\n}\n.blog-form .blog-form-action-container {\n text-align: center;\n}\n.blog-form .blog-form-action-container .blog-form-action {\n min-width: 150px;\n padding: 10px;\n font-size: 16px;\n background: #2b4c8a;\n color: white;\n}\n.blog-collection-wrapper {\n max-width: 1000px;\n margin: 0 auto;\n}\n.blog-published .blog-item-title {\n font-size: 20px;\n margin-bottom: 5px;\n}\n.blog-published .blog-item-title a:hover {\n text-decoration: none;\n}\n.blog-published .blog-item-details div {\n display: inline-block;\n margin-right: 25px;\n margin-bottom: 10px;\n color: gray;\n}\n.blog-published .blog-item-content .blog-item-view {\n margin-top: 5px;\n text-decoration: underline;\n}\n.blog-published {\n margin-top: -20px\n}\n.blog-published .blog-item {\n border-bottom: 1px solid #cccccc;\n padding-bottom: 20px;\n padding-top: 30px;\n}<\/pre>\n\n\n\n![\"2021-08-03_18-11\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/2021-08-03_18-11-1200x625.png\")
<\/figure>\n\n\n\n![\"2021-08-03_18-12-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/2021-08-03_18-12-1-1200x504.png\")
<\/figure>\n\n\n\n
<\/p>\n\n\n\n