{"id":2197,"date":"2020-05-15T10:33:33","date_gmt":"2020-05-15T10:33:33","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=2197"},"modified":"2020-05-22T09:19:49","modified_gmt":"2020-05-22T09:19:49","slug":"tao-view-trong-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/tao-view-trong-magento-2\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn l\u1eadp tr\u00ecnh module Magento 2: T\u1ea1o view"},"content":{"rendered":"\n
\n

Trong b\u00e0i 4 c\u1ee7a lo\u1ea1t b\u00e0i h\u01b0\u1edbng d\u1eabn l\u1eadp tr\u00ecnh module Magento 2, ch\u00fang ta s\u1ebd c\u00f9ng nhau xem c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a view.<\/p>\n\n\n\n

Nh\u01b0 c\u00e1c b\u1ea1n \u0111\u00e3 bi\u1ebft, \u1edf b\u00e0i 1 ch\u00fang ta t\u1ea1o 1 module \u0111\u01a1n gi\u1ea3n hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef Hello World ra trang store, \u0111\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3 ch\u00fang ta \u0111\u00e3 s\u1eed d\u1ee5ng view. N\u00ean c\u00f3 th\u1ec3 hi\u1ec3u 1 c\u00e1ch \u0111\u01a1n gi\u1ea3n r\u1eb1ng view gi\u00fap ch\u00fang ta hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u00ean trang. <\/p>\n\n\n\n

View trong Magento 2 \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng t\u1eeb Block, Layout v\u00e0 Template.<\/p>\n<\/div><\/div>\n\n\n\n

Ch\u00fang ta \u0111\u00e3 t\u1ea1o b\u1ea3ng v\u00e0 th\u00eam d\u1eef li\u1ec7u trong 2 b\u00e0i vi\u1ebft tr\u01b0\u1edbc, b\u00e2y gi\u1edd ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng view \u0111\u1ec3 hi\u1ec3n th\u1ecb nh\u1eefng d\u1eef li\u1ec7u \u0111\u00f3 tr\u00ean trang store.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: T\u1ea1o Controller.<\/h2>\n\n\n\n

C\u00e1c b\u1ea1n t\u1ea1o Magetop\/Helloworld\/Controller\/Learning\/View.php<\/strong> v\u1edbi \u0111o\u1ea1n code:<\/p>\n\n\n

\n<?php\nnamespace Magetop\\Helloworld\\Controller\\Learning;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Action\\Context;\n\nclass View extends Action\n{\n    protected $pageFactory;\n\n    public function __construct(Context $context, PageFactory $pageFactory)\n    {\n        parent::__construct($context);\n        $this->pageFactory = $pageFactory;\n    }\n\n    public function execute()\n    {\n        $resultPage = $this->pageFactory->create();\n        \/\/ T\u1ea1o ti\u00eau \u0111\u1ec1\n        $resultPage->getConfig()->getTitle()->set(__('Danh s\u00e1ch b\u00e0i vi\u1ebft'));\n\n        \/\/ T\u1ea1o breadcrumb\n        \/** @var \\Magento\\Theme\\Block\\Html\\Breadcrumbs *\/\n        if($resultPage->getLayout()->getBlock('breadcrumbs')) {\n            $breadcrumbs = $resultPage->getLayout()->getBlock('breadcrumbs');\n            $breadcrumbs->addCrumb('TrangChu',\n                [\n                    'label' => __('Home'),\n                    'title' => __('TrangChu'),\n                    'link' => $this->_url->getUrl('')\n                ]\n            );\n            $breadcrumbs->addCrumb('Blog',\n                [\n                    'label' => __('Posts'),\n                    'title' => __('BaiViet')\n                ]\n            );\n        }\n        return $resultPage;\n    }\n}\n<\/pre><\/div>\n\n\n
B\u01b0\u1edbc 2: T\u1ea1o Block.<\/h2>\n\n\n\n
T\u1ea1o Magetop\/Helloworld\/Block\/Bloglist.php<\/strong> v\u1edbi \u0111o\u1ea1n code:<\/p>\n\n\n
\n<?php\nnamespace Magetop\\Helloworld\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magetop\\Helloworld\\Model\\ResourceModel\\Posts\\CollectionFactory;\n\nclass Bloglist extends Template\n{\n    protected $PostsFactory;\n\n    public function __construct(Template\\Context $context, CollectionFactory $postsFactory)\n    {\n        $this->PostsFactory = $postsFactory;\n        parent::__construct($context);\n    }\n\n    public function GetBlog(){\n        $blog = $this->PostsFactory->create();\n        return $blog;\n    }\n}\n<\/pre><\/div>\n\n\n
B\u01b0\u1edbc 3: T\u1ea1o view.<\/h2>\n\n\n\n
B3.1:<\/strong> Tr\u01b0\u1edbc ti\u00ean t\u1ea1o file css Magetop\/Helloworld\/view\/frontend\/web\/css\/styleTable.css<\/strong> b\u00ean trong c\u00f3 \u0111o\u1ea1n code:<\/p>\n\n\n
\ntable, th, td {\n    border: 1px solid black;\n    border-collapse: collapse;\n}\n<\/pre><\/div>\n\n\n
B3.2:<\/strong> T\u1ea1o layout Magetop\/Helloworld\/view\/frontend\/layout\/hello_learning_view.xml<\/strong>, t\u00ean c\u1ee7a file xml ph\u1ea3i d\u1ef1a theo quy t\u1eafc routes_controller_action<\/strong>. Trong file hello_learning_view.xml<\/strong> c\u00f3 \u0111o\u1ea1n code sau:<\/p>\n\n\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<!--\n\/**\n * hello_learning_view\n *\n * @copyright Copyright \u00a9 2020 MAGETOP. All rights reserved.\n * @author    info@magetop.com\n *\/\n-->\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        <css src="Magetop_Helloworld::css\/styleTable.css"\/>\n    <\/head>\n    <body>\n        <referenceContainer name="content">\n            <block class="Magetop\\Helloworld\\Block\\Bloglist" name="hello_learning_view" template="Magetop_Helloworld::blogs.phtml"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page>\n<\/pre><\/div>\n\n\n
B3.3:<\/strong> T\u1ea1o template, c\u00e1c b\u1ea1n ch\u00fa \u00fd \u0111\u1ec3 file \u1edf \u0111\u1ecbnh d\u1ea1ng phtml Magetop\/Helloworld\/view\/frontend\/templates\/blogs.phtml<\/strong> v\u1edbi \u0111o\u1ea1n code:<\/p>\n\n\n
\n<?php\n    $posts = $block->GetBlog();\n?>\n\n<table>\n  <tr>\n        <th class="blog-id">Id<\/th>\n        <th class="blog-name">Ti\u00eau \u0110\u1ec1<\/th>\n        <th>Summary<\/th>\n        <th>N\u1ed9i Dung<\/th>\n  <\/tr>\n    <?php\n        foreach ($posts as $data){\n            echo '<tr>\n                    <td>'.$data->getId().'<\/td>\n                    <td>'.$data->getTitle().'<\/td>\n                    <td>'.$data->getSummary().'<\/td>\n                    <td>'.$data->getDescription().'<\/td>\n                  <\/tr>';\n        }\n    ?>\n<\/table>\n<\/pre><\/div>\n\n\n
Sau khi t\u1ea1o h\u1ebft xong c\u00e1c b\u1ea1n nh\u1edb l\u01b0u l\u1ea1i v\u00e0 ch\u1ea1y 2 l\u1ec7nh: <\/p>\n\n\n\n