Membuat halaman di magento 2 menggunakan controller

Controller dalam magento berfungsi untuk menerima http request dan mengirim response. Controller bisa kita manfaatkan untuk membuat halaman web dalam aplikasi magento kita.

Dalam tutorial ini kita menggunakan custom plugin. Anda bisa membaca artikel ini untuk membuat plugin baru: https://blog.hprasetyou.com/membuat-plugin-magento-2/

Menyiapkan routes

Untuk membuat halaman tentu kita membutuhkan url untuk mengakses halaman tersebut. Untuk itu kita harus membuat routes atau url untuk plugin kita.

buat file app/code/Vendor/Plugin/etc/frontend/routes.xml

<?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 frontName="blogs" id="hprasetyou_blogs">
            <module name="Vendor_Plugin"/>
        </route>
    </router>
</config>

Sesuaikan frontname dan id dengan plugin anda

Kita lihat pada properti frontName=”blogs”. Ini merupakan value yang digunakan pada url kita nantinya. Untuk mengakses controller dalam plugin kita, kita menggunakan value ini.

Untuk standar struktur url pada magento adalah seperti ini:
/plugin_frontname/(controllers_folder)/(action)
Jadi pada plugin kita akan seperti ini:
/blogs/controller(folder)/action. Agar tidak makin bingung mari kita buat controller untuk menampilkan halaman.

Membuat controller

buat file controller di app/code/{Vendor}/{Plugin}/Controller/{Nama Controller}/{Action}.php
contoh milik saya: app/code/Hprasetyou/Blog/Controller/Posts/Index.php

<?php
namespace Hprasetyou\Blog\Controller\Posts;

class Index extends \Magento\Framework\App\Action\Action
{
	protected $_pageFactory;

	public function __construct(
		\Magento\Framework\App\Action\Context $context,
		\Magento\Framework\View\Result\PageFactory $pageFactory)
	{
		$this->_pageFactory = $pageFactory;
		return parent::__construct($context);
	}

	public function execute()
	{
		return $this->_pageFactory->create();
	}
}

Setelah itu buka http://localhost/magento/blogs/posts/index di browser anda. akan muncul halaman kosong magento.

Mengatur layout halaman

Kita bisa mengatur halaman kita, menambahkan block, assets, mengatur title dsb dengan menggunakan layout xml.
Buat file layout di app/code/{Vendor}/{Plugin}/view/frontend/layout/{nama_layout}.xml
Untuk format nama dari layoutnya harus menyesuaikan dengan controller yang ingin kita lakukan layout update.
Formatnya adalah sebagai berikut:
route_controller_action.xml
Karena route blogs milik saya memiliki id hprasetyou_blogs, dan folder controller saya adalah posts lalu action saya adalah index. Maka struktur layout untuk action index milik saya adalah: hprasetyou_blogs_posts_index.xml

Kita akan coba mengatur title dari halaman kita dan mengupdate tipe layout.

<?xml version="1.0"?>
<!--
 app/code/Hprasetyou/InfoTop/view/frontend/layout/default.xml
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Blogs</title>
    </head>
</page>

Lalu kita jalankan cache:flush dan kita cek perubahan di browser kita:

Seperti yang kita lihat, blok compare dan my wish list menghilang. Ini karena kita menggunakan layout type 1column (default adalah 2column). Kita juga mendapatkan blok baru, dan title halaman kita juga menjadi blok. Untuk blok ini adalah blok title, bawaan dari magento. Jadi jika kita menset title di halaman kita akan otomatis muncul blok tersebut.

Menambahkan block di halaman

Untuk menambahkan block di halaman ini, langkahnya sebenarnya sama seperti di postingan sebelumnya. Hanya saja untuk layout yang digunakan bukan default.xml tetapi layout yang kita gunakan untuk halaman ini (hprasetyou_blogs_posts_index.xml)

Kita buat dulu class untuk block kita: app/code/{Vendor}/{Plugin}/Block/Post.php

<?php
namespace {Vendor}\{Plugin}\Block;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Post extends Template implements BlockInterface
{

}

Lalu kita buat file templatesnya app/code/{Vendor}/{Plugin}/view/frontend/templates/posts/list.phtml

<div class="blogs">
<div class="blog-item">
<h3>Lorem ipsum</h3>
<p>Consequat labore labore in qui minim officia mollit ad veniam. Est fugiat anim eiusmod sit labore esse eu dolor mollit. Fugiat qui officia anim aute occaecat duis laborum aute. Amet magna amet magna velit esse tempor ut veniam esse nisi nostrud. Esse tempor eu excepteur consectetur sit ad ea. Ad nostrud dolor ipsum elit irure irure nisi et cillum occaecat laboris magna culpa ad. Culpa ut est dolore magna magna velit elit sit enim eu esse culpa anim eiusmod.</p>
</div>
</div>

Edit file layout kita (hprasetyou_blogs_posts_index.xml) untuk menyisipkan block kita di content. Menjadi:

<?xml version="1.0"?>
<!--
 app/code/Hprasetyou/InfoTop/view/frontend/layout/default.xml
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Blogs</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Hprasetyou\Blog\Block\Post" name="hprasetyou_blog.post.list" template="Hprasetyou_Blog::posts/list.phtml"/>
        </referenceContainer>
    </body>
</page>

Jangan lupa sesuaikan nama vendor dan nama plugin. Jika sudah selesai kita lakukan cache:flush dan cek perubahan di browser. Hasilnya kira kira akan menjadi seperti ini:

Jika kita ingin menambahkan assets seperti css js khusus untuk halaman ini bisa dengan menambahkannya pada layout xml untuk halaman ini.

Demikian artikel ini semoga bermanfaat.

Leave a Reply

%d bloggers like this: