Ở bài viết trước chúng ta đã tìm hiểu cách tạo một Controller trong Magento 2. Hôm nay chúng ta sẽ cùng nhau tìm hiểu về một phần cũng không kém phần quan trọng trong Magento 2 đó là View. Như bạn biết View sẽ hiển thị ở frontend (UI) mà người dùng có thể nhìn thấy được. Trong Magento 2 view được chia làm ba phần: layout, block và template. Trong bài viết này tôi sẽ hướng dẫn các bạn tạo view và hiển thị HelloWorld ra ngoài trình duyệt bằng cách sử dụng lại module ViMagento_HelloWorld và controller đã tạo ở bài viết trước. Nếu bạn nào chưa có thì có thể tham khảo bài viết sau:
Trong thư mục view sẽ có các thư mục con:
-
frontend: chứa mã nguồn phía frontend
- layout: chứa các file định nghĩa layout
- template: chứa các file templates .phtml dùng để render mã html
- web: chứa các file js, css, less…
- adminhtml: cũng chứa các folder layout, templates, web như trên nhưng sử dụng bên phía backend
- base: cũng có các thư mục như trên nhưng được sử dụng cho cả frontend và backend.
Bước 1: Tạo layout trong Magento 2
Layout được chia làm hai loại:
- default.xml: sử dụng file này nếu bạn muốn layout của bạn được áp dụng trên tất cả trang của website.
- routeId_controllerName_actionName.xml: sử dụng file này nếu bạn chỉ muốn áp dụng layout của mình cho một trang mong muốn. Trong đó tên file được chia làm ba phần tương tự như cách xác định URL ở bài trước. Chỉ khác là phần đầu tiên sẽ là route ID được xác định trong routes.xml của bạn. Ví dụ trong bài viết này là helloworld_post_index.xml
Tạo file ViMagento/HelloWorld/view/frontend/layout/helloworld_post_index.xml với nội dung sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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"> <head> <title>HelloWorld</title> </head> <body> <referenceContainer name="content"> <block class="ViMagento\HelloWorld\Block\Index" name="helloworld_index" template="ViMagento_HelloWorld::helloworld.phtml" /> </referenceContainer> </body> </page> |
Layout sử dụng file templates để kết xuất nội dung html để hiển thị ra frontend. Ở đây là file helloworld.phtml, nghe tên bạn cũng có thể đoán được rồi đúng không nào, file này có thể viết được mã PHP và HTML nhé thậm chí CSS và Javascript. Và nó kết nối đến một file block dùng để cung cấp dữ liệu cho templates, Ví dụ như lấy 10 sản phẩm mới nhất để show ra frontend chẳng hạn…Hoàn toàn có thể làm được nhé. Ngoài ra layout còn có nhiều tác dụng nữa sẽ được trình bày chi tiết trong bài viết sau.
Bước 2: Tạo Block trong Magento 2
Tạo file ViMagento/HelloWorld/Block/Index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php namespace ViMagento\HelloWorld\Block; use Magento\Framework\View\Element\Template; class Index extends \Magento\Framework\View\Element\Template { public function __construct(Template\Context $context, array $data = []) { parent::__construct($context, $data); } public function getTitle() { return __('HelloWorld!'); } } |
File này sử dụng function getTitle để trả về dòng chữ HelloWorld!, đây chỉ là ví dụ thôi nhé. Bạn có thể viết bất cứ logic nào của bạn để lấy dữ liệu cung cấp cho templates file.
Bước 3: Tạo template trong Magento 2
Tạo file ViMagento/HelloWorld/view/templates/helloworld.phtml
|
1 |
<?= $block->getTitle(); ?> |
Ở đây chúng ta sử dụng $block->getTitle() để lấy dữ liệu được trả về từ function getTitle đã được tạo ở bước trên. Bạn có thể viết thêm HTML vào file này.
Tiếp theo xóa cache của Magento để áp dụng các thay đổi bạn đã thực hiện:
php bin/magento cache:clean
Bước 4: Kiểm tra layout đã được hiển thị chưa
Truy cập vào controller của bạn trên trình duyệt. Trong bài viết này là https://example.com/helloworld/post/index. Nếu dòng chữ HelloWorld! được hiển thị thì chúc mừng bạn đã thành công rồi đấy.
Kết luận
Như vậy chúng ta đã tạo thành công layout sử dụng để in ra dòng chữ HelloWorld!, việc tạo layout ở backend cũng tương tự nhé, chỉ khác thư mục thôi. Và qua bài viết này chắc hẳn các bạn đã hiểu và biết cách sử dụng layout, block, template trong Magento 2 rồi phải không nào. Ở bài viết sau, tôi sẽ trình bày chi tiết hơn về layout trong Magento 2.
Xem thêm về view trong Magento 2 để biết thêm chi tiết: https://devdocs.magento.com/guides/v2.4/extension-dev-guide/view-models.html
Bước 3: Tạo template trong Magento 2Tạo file ViMagento/HelloWorld/view/templates/helloworld.phtml
Phair là:
Tạo file ViMagento/HelloWorld/view/frontend/templates/helloworld.phtml
Cái chức năng copy, thừa dấu xuống dòng cuối dòng, đầu dòng nó cũng k chịu chạy
<3