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.
Oh yeah, tks bác, mình đang cần cái này quá 😀
Bài viết hay, đọc bài này mình có thể nghiệm ra đc nhiều cái của magento
Nếu ai chịu cày tiếng Anh thì vào đây học, hầu hết training gần hết:
http://blog.magestore.com/category/magento-training/page/7/
Mình thấy tác giả cover lại Tiếng Việt, rất dễ hiểu.
Cảm ơn bạn rất nhiều! 🙂
Cái trang magentostore cũng là của VN mình. Các bác trong đó chắc pro lắm! Giờ mình mới tìm hiểu về magento. Bác nào có tài liệu chuẩn về việc hướng dẫn làm template thì send cho mình với nhé! Email: hoangvan87@gmail.com. Tks all 🙂
Tuyệt vời ông mặt trời….
Quẩy lên a ơi.
Ok chu. 🙂
bác blanka giờ mới biết ở magestore , trueplus thảo nào thấy code trên blog quen quen 😀
Em làm theo hướng dẫn ở trên thì nó xảy ra lỗi như này:
Fatal error: Call to a member function getSize() on a non-object in D:\xampp\htdocs\magento\app\design\frontend\base\default\template\page\html\pager.phtml on line 34
Ai giải thích tại sao em lại bị lỗi này và cách giải quyết với ạ!
Bạn đã có file collection cho model chưa? Lỗi này là do khi bạn getCollection ra null. Kiểm tra lại chỗ đó nhé!
2anh ơi sửa giúp cho em lỗi với :
Parse error: syntax error, unexpected ‘if’ (T_IF), expecting function (T_FUNCTION) in C:\xampp\htdocs\magento\magento\magento\magento\app\code\local\Magento\RewardPoint\Block\Adminhtml\Rewardpoint\Grid.php on line 58
Code của bạn bị lỗi cú pháp nhé! Post code lên forum http://forum.basetut.com/ và mình sẽ fix cho bạn.
^^ come on
createBlock(‘page/html_pager’, ‘salestaff.pager’)
cái này có 2 tham số là gì thế anh ơi, mà cái phần phân trang ở đâu cho em xin với ạ 🙁
Sao mình làm xong ko thấy hiển thị ra div phân trang nhỉ add?
A cho em hỏi cái đường dẫn này hình như không đúng và khi chạy e bị lỗi Not Found. Giải đáp giùm e với ạ? app\design\frontend\default\default\template\salestaff\grid.phtml
app\design\frontend\default\default\layout\salestaff.xml