Embed Size (px)
DESCRIPTION
Lập trình Zend Framework - Nhúng template vào ứng dung ZF2 (P1) - Bài 7 Để tìm hiểu kỹ hơn các bạn hãy truy cập: Website: www.zend.vn Facebook: facebook.com/zendvngroup Youtube: youtube.com/user/luutruonghailan
Citation preview
Nhúng template vào ứng dụng Zend Framework 2 (Phần 1)
Xem 'Bài 6 - Tạo module mới trong Zend Framework 2' trước khi thực hành bài này
- Trong bài này chúng ta sẽ thực hiện việc nhúng template vào ứng dụng bằng 2 cách:
o Cách thứ 1 chúng ta sẽ dùng thư mục LAYOUT trong MODULE theo chuẩn Zend
Framework 2
o Các thứ 2 chúng ta sẽ chuyển TEMPLATE đến một thư mục khác
A. Chuẩn bị template
- Download template tại địa chỉ: http://www.zend.vn/download/pictures/zend-framework-2/04-
nhung-templates-vao-zf2/hairstylesalon.zip
- Sau đó chúng ta giải nén sẽ được cấu trúc thư mục và file như sau:
B. Nhúng Template theo chuẩn của Zend Framework 2
- Trong phần này chúng ta sẽ nhúng TEMPLATE theo chuẩn của Zend Framework 2. Chúng ta
thực hiện các bước như sau
- Mở thư mục chứa TEMPLATE mẫu chép 3 thư mục /css, /fonts và /images vào thư mục /public
ngoài thư mục gốc và chép 5 file about.html, contact.html, hairstyle.html, index.html và
news.html vào thư mục /module/Template/view/layout chúng ta sẽ được cấu trúc như hình sau:
- Đổi tên các tập tin có đuôi là .html trong thư mục /module/Template/view/layout thành .phtml.
Sau khi đổi tên chúng ta trong thư mục /module/Template/view/layout sẽ như sau:
- Tiếp theo chúng ta sẽ khai báo các LAYOUT chúng ta sẽ sử dụng cho MODULE này bằng cách
chỉnh thêm vào phần tử 'view_manager' trong tập tin
/module/Template/config/module.config.php một mảng :
'template_map' => array(
'layout/home' => __DIR__ . '/../view/layout/index.phtml',
'layout/about' => __DIR__ . '/../view/layout/about.phtml',
'layout/news' => __DIR__ . '/../view/layout/news.phtml',
'layout/hairstyle' => __DIR__ . '/../view/layout/hairstyle.phtml',
'layout/contact' => __DIR__ . '/../view/layout/contact.phtml',
),
- Sau khi thêm tập tin /module/Template/config/module.config.php sẽ có nội dung đầy đủ như sau:
<?php
return array(
//Bat buoc phai co khong thi se co loi
'controllers' => array(
'invokables' => array(
'Template\Controller\Index' => 'Template\Controller\IndexController'
),
),
'router' => array(
'routes' => array(
'template' => array(
'type' => 'Literal',
'options' => array(
'route' => '/template',
'defaults' => array(
'__NAMESPACE__' => 'Template\Controller',
'controller' => 'Index',
'action' => 'index',
),//defaults
),//options
'may_terminate' => true,
'child_routes' => array(
'default' => array(
'type' => 'Segment',
'options' => array(
'route' => '/[:controller[/:action[/]]]',
'constraints' => array(
'controller' => '[a-zA-Z][a-zA-Z0-9_-]*',
'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
),//constraints
'defaults' => array(
),//defaults
),//options
),//default
),//child_routes
),//users
),//routes
),//router
'view_manager' => array(
'template_map' => array(
'layout/home' => __DIR__ . '/../view/layout/index.phtml',
'layout/about' => __DIR__ . '/../view/layout/about.phtml',
'layout/news' => __DIR__ . '/../view/layout/news.phtml',
'layout/hairstyle' => __DIR__ . '/../view/layout/hairstyle.phtml',
'layout/contact' => __DIR__ . '/../view/layout/contact.phtml',
),
'template_path_stack' => array(
'template' => __DIR__ . '/../view',
),
),
);
- Bây giờ chúng ta hãy chạy thử các URL sau:
- o localhost:8000/zf2basic/public/template/
o localhost:8000/zf2basic/public/template/index/about
o localhost:8000/zf2basic/public/template/index/contact
o localhost:8000/zf2basic/public/template/index/hairstyle
o localhost:8000/zf2basic/public/template/index/news
- Thì chúng ta sẽ không thấy có gì thay đổi cả. Để hiển thị 5 LAYOUT tương ứng trên từng
ACTION của IndexController thì chúng ta mở tập tin
/module/Template/src/Template/Controller/IndexController.php và thêm vào mỗi ACTION một
dòng mã lệnh như sau sau:
<?php
//Khai bao namespace
namespace Template\Controller;
//Load lớp AbstractActionController vào CONTROLLER
use Zend\Mvc\Controller\AbstractActionController;
//Load lớp ViewModel vào CONTROLLER
use Zend\View\Model\ViewModel;
class IndexController extends AbstractActionController
{
public function indexAction()
{
//'layout/home' => __DIR__ . '/../view/layout/index.phtml',
//Gọi đến tập tin LAYOUT index.phtml trong thư mục layout của MODULE
$this->layout('layout/home');
}
public function aboutAction(){
//'layout/about' => __DIR__ . '/../view/layout/about.phtml',
//Gọi đến tập tin LAYOUT index.phtml trong thư mục layout của MODULE
$this->layout('layout/about');
}
public function contactAction(){
//'layout/contact' => __DIR__ . '/../view/layout/contact.phtml',
//Gọi đến tập tin LAYOUT index.phtml trong thư mục layout của MODULE
$this->layout('layout/contact');
}
public function hairstyleAction(){
//'layout/hairstyle' => __DIR__ . '/../view/layout/hairstyle.phtml',
//Gọi đến tập tin LAYOUT index.phtml trong thư mục layout của MODULE
$this->layout('layout/hairstyle');
}
public function newsAction(){
//'layout/news' => __DIR__ . '/../view/layout/news.phtml',
//Gọi đến tập tin LAYOUT index.phtml trong thư mục layout của MODULE
$this->layout('layout/news');
}
}
- Bây giờ chúng ta hãy chạy thử các URL sau:
localhost:8000/zf2basic/public/template/
localhost:8000/zf2basic/public/template/index/about
localhost:8000/zf2basic/public/template/index/contact
localhost:8000/zf2basic/public/template/index/hairstyle
localhost:8000/zf2basic/public/template/index/news
- Thì chúng ta thấy phần nội dung đã hiển thị nhưng các trang vẫn chưa load được CSS, JS và
Image vì vậy chúng ta cần chỉnh lại 5 tập tin LAYOUT trong thư mục
/module/Template/view/layout
- Mở tập tin /module/Template/view/layout/index.phtml tìm những giá trị sau đây để chỉnh sửa:
Tìm dòng lệnh:
<link rel="stylesheet" href="css/style.css" type="text/css">
Sửa lại thành:
<link rel="stylesheet" href="<?php echo $this->basePath();?>/css/style.css" type="text/css">
Tìm các dòng lệnh chứa hình ảnh:
src="images
Sửa lại thành:
src="<?php echo $this->basePath();?>/images
- Sau đó chúng ta truy cập http://localhost:8000/zf2basic/public/template/ chúng ta sẽ được giao diện sau:
- Chúng ta làm tương tự cho các tập tin
/module/Template/view/layout/about.phtml
/module/Template/view/layout/contact.phtml
/module/Template/view/layout/hairstyle.phtml
/module/Template/view/layout/news.phtml
- Sau đó chúng ta chạy thử các URL:
localhost:8000/zf2basic/public/template/index/about
localhost:8000/zf2basic/public/template/index/contact
localhost:8000/zf2basic/public/template/index/hairstyle
localhost:8000/zf2basic/public/template/index/news
Download source here: http://www.zend.vn/download/pictures/zend-framework-2/03-nhung-templates-
vao-zf2/04-Nhung-templates-01.zip
Để tìm hiểu kỹ hơn các bạn hãy truy cập:
Website: www.zend.vn
Facebook: facebook.com/zendvngroup
Youtube: youtube.com/user/luutruonghailan
