XTemplate - Tách mã PHP và HTML trong lập trình PHP

Yêu cầu tách biệt giữa code xử lý và giao diện thường gặp trong mô hình MVC (đa tầng), hoặc nếu không tuần theo quy tắc nào, bạn cũng nên áp dụng phương án này để tiện hơn trong việc lập trình và quản lý code. Có rất nhiều class hỗ trợ thực hiện việc này, song bài viết này mình xin giới thiệu rõ hơn về XTemplate.

XTemplate là một class cho phép tách biệt mã PHP và HTML thành hai tập tin riêng biệt, kết nối với nhau để xử lý dữ liệu và hiển thị dữ liệu.

• Trang chủ: http://www.phpxtemplate.org/
• Trang dự án: http://sourceforge.net/projects/xtpl/

1. Tải về XTemplate class

Để bắt đầu làm việc, bạn truy cập vào trang dự án và tải class xtemplate phiên bản mới nhất về máy. Giải nén file zip vừa tải về, copy file xtemplate.class.php vào thư mục project bạn đang làm việc, chỉ một file này là đủ.

2. Chèn class vào dự án

Một bước quan trọng, include class và khởi tạo class

require_once 'xtemplate.class.php';
$xtpl = new XTemplate( 'index.html', '/tempate' );

Với index.html là tên file giao diện, và /template là đường dẫn đến thư mục chứa file giao diện.

3. Các cú pháp thường sử dụng

Phần này mình giới thiệu qua các cú pháp cơ bản, sẽ đi sâu vào từng ví dụ ở phần 4. Đây là các cú pháp cơ bản và thường dùng nhất, bạn có thể tham khảo thêm tài liệu tại trang dự án.

Lưu ý: Biến $xtpl được sử dụng bên dưới là biến khởi tạo Xtemplate, xem ở bước 2. Bạn cần gọi tên biến đúng với tên đã khai báo. XTemplate chia làm 2 khu vực cần xử lý:

Mã nguồn PHP
assign: Chức năng gán giá trị.
Cú pháp: $xtpl->assign( 'Biến HTML', Giá trị );
Ví dụ: 

$giatri = 1;
$xtpl->assign( 'GIATRI', $giatri );

parse: Chức năng đánh dấu khối
Cú pháp: $xtpl->parse( 'tên khối lớn.tên khối nhỏ' );
Ví dụ: 

$xtpl->parse( 'main.bodytext' );

XTemplate sử dụng "main" mặc định là tên khối lớn nhất. Khối lớn sẽ bao gồm các khối nhỏ bên trong. Tên khối lớn nhất có thể thay đổi.

Mã HTML
XTemptate nhận biến các khối thông qua cú pháp

<!-- BEGIN: tên khối -->
content
<!-- END: tên khối -->

4. Bắt đầu với các ví dụ đơn giản

4.1. Ví dụ đơn giản nhất, in ra màn hình dòng chữ "Hello world!"

Thường viết:

<?php

// Gán giá trị cho biến
$string = 'Hello world!';

// In giá trị ra màn hình
echo $string;

Sử dụng XTemplate
Mã PHP. Tạo file example1.php ơr thư mục gốc, viết đoạn code dưới đây:

<?php

// Chèn XTemplate vào dự án
require_once 'xtemplate.class.php';

// Khởi tạo class, liên kết đến file giao diện (example1.html) đặt ở thư mục /template
$xtpl = new XTemplate( 'example1.html', 'template' );

// Gán giá trị cho biến
$string = 'Hello world!';

// Sử dụng assign, gán giá trị cho CONTENT
$xtpl->assign( 'CONTENT', $string );

// Sử dụng parse, khai báo khối chứa nội dung này
$xtpl->parse( 'main' );

// In nội dung khôi main ra màn hình
echo $xtpl->text( 'main' );

Mã HTML. Tạo file /template/example1.html sử dụng nội dung dưới đây:

<!-- BEGIN: main -->
{CONTENT}
<!-- END: main -->

Nhìn ví dụ này thì có vẻ việc nhúng HTML vào PHP làm code ngắn hơn. Nhưng mà không sao, đến trường hợp phức tạp hơn mới thấy ra cái hay của XTemplate.

4.2. Ví dụ tiếp nhé, sử dụng vòng lặp in giá trị từ 0 đến 100

Thường viết:

<?php

echo '<ul>';
for( $i=0; $i<=100; $i++ )
{
	echo '<li>' . $i . '</li>';
}
echo '</ul>';

Sử dụng XTemplate
Mã PHP. Tạo file /example2.php sử dụng code dưới đây:

<?php

// Chèn XTemplate vào dự án
require_once 'xtemplate.class.php';

// Khởi tạo class
$xtpl = new XTemplate( 'example2.html', 'template' );

for( $i=0; $i<=100; $i++ )
{
	// Sử dụng assign, gán giá trị $i cho NUMBER
	$xtpl->assign( 'NUMBER', $i );
	// Sử dụng parse để đánh dấu khối chứa giá trị biến $i	// Cú pháp: Khối ngoài -> khối con, sử dụng dấu chấm
	$xtpl->parse( 'main.loop' );
}
// Sử dụng parse, khai báo khối chứa nội dung này
$xtpl->parse( 'main' );

// In nội dung khôi main ra màn hình
echo $xtpl->text( 'main' );

Mã HTML. Tạo file /template/example2.html sử dụng nội dung dưới đây:

<!-- BEGIN: main -->
<ul>
	<!-- BEGIN: loop -->
	<li>{NUMBER}</li>
	<!-- END: loop -->
</ul>
<!-- END: main -->

Đến đây mình nghĩ các bạn đã phần nào nhìn ra sự khác biệt trong code, khi viết HTML chung với PHP, và sử dụng XTemplate để tách PHP và HTML thành hai tập tin độc lập. Code trên mình viết 6 dòng, hãy tưởng tượng tập tin code của bạn lên đến vài nghìn dòng, thì việc quản lý code sẽ như thế nào?

4.3. Ví dụ này phức tạp hơn xí, in mảng giá trị ra màn hình.

Thường viết:

$array_data = array(
	array(
		'ID' => 1,
		'first_name' => 'Trien',
		'last_name' => 'Ho Ngoc'
	),
	array(
		'ID' => 2,
		'first_name' => 'Binh',
		'last_name' => 'Nguyen Van'
	)
);
echo '<table border=1>';
echo '	<tr>';
echo '		<td>ID</td>';
echo '		<td>Tên</td>';
echo '		<td>Họ, tên đệm</td>';
echo '	</tr>';
foreach( $array_data as $array )
{
	echo '	<tr>';
	echo '		<td>' . $array['ID'] . '</td>';
	echo '		<td>' . $array['first_name'] . '</td>';
	echo '		<td>' . $array['last_name'] . '</td>';
	echo '	</tr>';
}echo '</table>';

Sử dụng XTemplate
Mã PHP. Tạo file /example3.php sử dụng code dưới đây:

<?php

$array_data = array(
	array(
		'ID' => 1,
		'first_name' => 'Trien',
		'last_name' => 'Ho Ngoc'
	),
	array(
		'ID' => 2,
		'first_name' => 'Binh',
		'last_name' => 'Nguyen Van'
	)
);

// Chèn XTemplate vào dự án
require_once 'xtemplate.class.php';
// Khởi tạo class
$xtpl = new XTemplate( 'example3.html', 'template' );

foreach( $array_data as $array )
{
	// Sử dụng assign, gán giá trị $array cho DATA
	$xtpl->assign( 'DATA', $array );
	// Sử dụng parse để đánh dấu khối chứa giá trị biến $array
	// Cú pháp: Khối ngoài -> khối con, sử dụng dấu chấm
	$xtpl->parse( 'main.loop' );
}

// Sử dụng parse, khai báo khối chứa nội dung này
$xtpl->parse( 'main' );

// In nội dung khôi main ra màn hình
echo $xtpl->text( 'main' );

Mã HTML. Tạo file /template/example3.html sử dụng nội dung dưới đây:

<!-- BEGIN: main -->
<table border="1">
	<tr>
		<td>ID</td><td>Tên</td><td>Họ - tên đệm</td>
	</tr>
	<!-- BEGIN: loop -->
	<tr>
		<td>{DATA.ID}</td><td>{DATA.first_name}</td><td>{DATA.last_name}</td>
	</tr>
	<!-- END: loop -->
</table>
<!-- END: main -->

Code nhìn đẹp hẳn ra đúng không? Nó không phải là một đống bùi nhùi như khi viết chung HTML và PHP. XTemplate rất đơn giản, chỉ cần hiểu được những cú pháp này là bạn đã có thể làm việc với những dự án lớn.

Toàn bộ code trong bài này bạn có thể tải tại đây. Chổ nào thắc mắc, hoặc trong quá trình vận dụng có điểm nào chưa hiểu, có thể comment bên dưới mình giải thích rõ hơn nhé.

Chúc các bạn thành công!