Tut Magento 014: Tạo một grid hiển thị dữ liệu ngoài frontend Magento

Lâu rồi ta đã quen thao tác và hiển thị dữ liệu trong admin và hôm nay mình sẽ giới thiệu một topic tương đối hữu ích cho người đang tìm hiểu Magento đó là “tạo grid hiển thị dữ liệu ngoài frontend Magento”. Như chúng ta đã biết Magento mặc định khi đăng nhập bằng customer account sẽ có phần quản lý order dưới dạng bảng giúp customer có thể xem được danh sách các order của mình một cách dễ dàng.

Trong bài học này mình sẽ vẫn sử dụng module basetut_salestaff_1.1 cùa Tut Magento 013 và thêm vào đó 1 phần hiển thị ra danh sách staff ngoài frontend có phân trang.

1. Tạo file template app\design\frontend\default\default\template\salestaff\grid.phtml

File template này có chứa 1 table với các cột sau:

– No: id của staff

– Name: tên staff

– Birthday: ngày sinh của staff

– Sex: giới tính

– Status: trạng thái

<!-- Page Title -->
<div class="page-title">
<h2><?php echo $this->__('Staff Grid') ?></h2>
</div>
<?php echo $this->getPagerHtml() ?> <!--Add Paging-->
<table id="my-person-table" class="data-table">
<colgroup>
<col width="1">
<col>
<col width="1">
<col width="1">
<col>
</colgroup>
<thead>
<tr class="first last">
<th><?php echo $this->__('No.')?></th>
<th><?php echo $this->__('Name')?></th>
<th><?php echo $this->__('Birth Day')?></th>
<th><?php echo $this->__('Sex')?></th>
<th><?php echo $this->__('Status')?></th>
</tr>
</thead>
<tbody>
<?php foreach($this->getCollection() as $staff): ?>
<tr>
<td><?php echo $staff->getId();?></td>
<td><?php echo $staff->getData('name')?></td>
<td><?php echo Mage::helper('core')->formatDate($staff->getData('birthday'))?></td>
<td><?php echo $this->getSexLabel($staff)?></td>
<td><?php echo $this->getStatusLabel($staff)?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<script type="text/javascript">decorateTable('my-person-table')</script>

2. Tạo file layout app\design\frontend\default\default\layout\salestaff.xml

File này sẽ chỉ ra handle nào gọi đến block và file template nào của extension.

</pre>
<?xml version="1.0"?>
<layout version="0.1.0">
 <salestaff_index_index>
 <reference name="content">
 <block type="salestaff/grid" template="salestaff/grid.phtml" name="staff_grid" >
 <block type="page/html_pager" name="salestaff_pager"/>
 </block>
 </reference>
 </salestaff_index_index>
</layout>
<pre>

Nhìn vào file ta thấy ngay handle chính sẽ là salestaff_index_index và block được sử dụng là Basetut_Salestaff_Block_Grid. Không những thế file này còn chèn block page/html_pager vào giúp cho table có thể phân trang được nếu nó được gọi ra.

3. Tạo file block app\code\local\Basetut\Salestaff\Block\Grid.php

</pre>
<?php

class Basetut_Salestaff_Block_Grid extends Mage_Core_Block_Template {
 //construct function
 public function __construct() {
 parent::__construct();
 $collection = $this->getStaffCollection();
 $this->setCollection($collection);
 }
 //prepare layout
 public function _prepareLayout() {
 parent::_prepareLayout();
 $pager = $this->getLayout()->createBlock('page/html_pager', 'salestaff.pager')->setCollection($this->getCollection());
 $this->setChild('pager', $pager);
 return $this;
 }

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

public function getStaffCollection() {
 $collection = Mage::getModel('salestaff/staff')->getCollection();
 return $collection;
 }

public function getSexLabel($staff) {
 if ($staff->getId()) {
 if ($staff->getSex() == 1)
 return Mage::helper('salestaff')->__('Male');
 }
 return Mage::helper('salestaff')->__('Female');
 }

public function getStatusLabel($staff) {
 if ($staff->getId()) {
 if ($staff->getStatus() == 1)
 return Mage::helper('salestaff')->__('Enabled');
 }
 return Mage::helper('salestaff')->__('Disabled');
 }

}
<pre>

4. Tạo file controllerapp\code\local\Basetut\Salestaff\controllers\IndexController.php
File này chỉ đơn giản là load các block, template đã quy định trong file layout và hiển thị html của chúng.

</pre>
class Basetut_Salestaff_IndexController extends Mage_Core_Controller_Front_Action {
 public function indexAction(){
 $this->loadLayout();
 $this->renderLayout();
 }
}
<pre>

Sau khi hoàn thiện code bạn có thể truy cập vào đường link sau để xem kết quả: http://yoursite.com/salestaff.
Khi trong database có sẵn các staff thì màn hình hiển thị sẽ có dạng như sau:

Nếu các bạn chưa làm được thì có thể download source code basetut_salestaff_1.1 về tham khảo. Cảm ơn tất cả các bạn đã theo dõi.