10/10/2018, 11:33

»» Tutorial XTemplate by 1024KB ««

Sau một thời gian mày mò, nghiên cứu về Template Engine, cụ thể là XTemplate. 1024KB thấy XTemplate rất là dễ dùng
dễ sử dụng. Nay 1024KB muốn chia sẻ với các bạn về cách sử dụng XTemplate.
Bài này là kiến thức tổng hợp từ sự tự học của 1024KB. Hy vọng sẽ giúp ít nhiều các bạn hiểu hơn về XTemplate.
Bài có sử dụng VD trong XTemplate Document. Đồng thời 1024KB sẽ hướng dẫn các bạn cơ bản để tạo 1 trang web sử dụng XTemplate.
Rất mong được sự đóng góp ý kiến của các bạn.
Các bạn có thể down XTemplate tại địa chỉ: http://www.phpxtemplate.org/HomePage
Bài 1: Giới thiệu Lý thuyết
XTemplate được phân biệt với nhau bằng các Block. Block lớn nhất trong XTemplate là block "main". Mình thấy nó ở trong file xtemplate.class.php

PHP Code:


var $mainblock = 'main';

Các Block được bắt đầu và kết thúc bởi cặp Comment:

Code:

<!-- BEGIN: block_name -->
   //HTML code or Var Name
<!-- END: block_name -->

Tạm thời coi như xong bài 1.
Bài 2: Viết chương trình đầu tiên. Xuất chữ Hello World
VD: file template của bạn là: bai1.html (bạn có thể đặt tên đuôi file tùy ý: .tpl, .xtpl, .v.v)

Code:

<!-- BEGIN: main -->
<html>
<body>
<h1>Bài 1: Viết chương trình đầu tiên</h1>
{var_name}
</body>
</html>
<!-- END: main -->

Trong PHP sử dụng XTemplate được viết như sau:

PHP Code:


<?php

    include 'xtemplate.class.php';

    $tpl =& new XTemplate('bai1.html');

    //Gán giá trị vào var_name

    $tpl->assign('var_name','Hello World');

    //Parse giá trị vào main

    $tpl->parse('main');

    //Xuất nội dung

    $tpl->out('main');

?>

Khi chạy file PHP ta được kết quả:

Code:

Bài 1: Viết chương trình đầu tiên
Hello World

Như vậy, lệnh Assign dùng để gán giá trị.
Và Parse để đưa giá trị đó vào Block.

Bài 2: Sử dụng các Block
file bai2.html

Code:

<!-- BEGIN: main -->
<html>
<body>
{test1}
<!-- BEGIN: block_1 -->
{name_block_1}
<!-- END: block_1 -->
<!-- BEGIN: block_2 -->
This is Block 2
<!-- END: block_2 -->
{test2}
<!-- BEGIN: block_3#Bạn có thể comment cho Block ở đây-->
	<table border="1">
		<tr>
			<td>ID</td>
			<td>{Data.ID}</td>
		</tr>
		<tr>
			<td>Name</td>
			<td>{Data.Name}</td>
		</tr>
		<tr>
			<td>Age</td>
			<td>{Data.Age}</td>
		</tr>
	</table>
<!-- END: block_3 -->
</body>
</html>
<!-- END: main -->

Và file bai2.php có code như sau:

PHP Code:


<?php

    include 'xtemplate.class.php';

    $tpl =&new XTemplate('bai2.html');

    //Gán giá trị

    $tpl-> assign('test1', 'Cac Block 1,2');

    //Gán giá trị cho Block 1

    $tpl-> assign('name_block_1','This is Block 1');

    $tpl->parse('main.block_1');

    //Bạn có thể không Parse Block_2. Khi đó Block 2 sẽ không được hiện lên Browser

    $tpl->parse('main.block_2');

    $row = array('ID' => 1,

                'Name' => '1024KB',

                'Age' => 24);

    //Gán giá trị cho Block 3.

    $tpl->assign('DATA',$row);

    //hoặc bạn cũng có thể viết gọn hơn

    //$tpl->assign('DATA',array('ID' => 1,

    //                            'Name' => '1024KB',

    //                            'Age' => 24));

    //Parse vào Block 3

    $tpl->parse('main.block_3');

    //Xuất dữ liệu

    $tpl->out('main');

?>

Tạm thời viết đến thế đã. 4h20 rùi. Đi ngủ cái...
Bác Mod sửa hộ em cái Title. Viết sai roài .
Bác Mod thấy có ích Stick cho em cái nhé.
To be continue...

[=========> Bổ sung bài viết <=========]

Chú ý cho các bài trước: Khi Parse phải theo thứ tự từ trong ra ngoài. VD: ta có các block sau

Code:

<!-- BEGIN: main -->
	<!-- BEGIN: block_1 -->
		This is Block 1
		<!-- BEGIN: sub_block_1 -->
			This is sub Block 1
		<!-- END: sub_block_1 -->
	<!-- END: block_1 -->
	<!-- BEGIN: block_2 -->
		This is Block 2
	<!-- END: block_2 -->
<!-- END: main -->

Như vậy. Khi cần chữ "This is sub Block 1" thì bạn phải Parse như sau:

PHP Code:


$tpl->parse('main.block_1.sub_block_1');

$tpl->parse('main.block_1');

//cuối cùng parse vào main

$tpl->parse('main');

Nếu chỉ muốn hiện mỗi chứ "This is Block 1" thì bạn không Parse sub block nữa.

PHP Code:


$tpl->parse('main.block_1');

$tpl->parse('main');

Với Block 2 thì dễ hơn

PHP Code:


$tpl->parse('main.block_2');

//$tpl->parse('main');

Nếu trong Sub Block 1 lại có thêm 1 Block nữa thì bạn phải Parse

PHP Code:


$tpl->parse('main.block_1.sub_block_1.sub_sub_block_1');

$tpl->parse('main.block_1.sub_block_1');

$tpl->parse('main.block_1');

//$tpl->parse('main');

Thật là dễ dàng đúng không?.

Bài 3: Cách lặp một Block
Với cách lặp Block này. Sau này ta sẽ dùng khi cần lặp CSDL dùng while
File Template: bai3.html

Code:

<!-- BEGIN: main -->
<html>
<body>
<!-- BEGIN: block_table -->
<table border="1">
	<tr>
		<td>ID</td>
		<td>Name</td>
		<td>Age</td>
	</tr>
	//Đây là chỗ cần lặp
	//Và ta tạo 1 block cho chỗ cần lặp
	//Khi nào muốn lặp thì bạn tạo Block cho nó.
	<!-- BEGIN: loop_block -->
		<tr>
			<td>{DATA.ID}</td>
			<td>{DATA.NAME}</td>
			<td>{DATA.AGE}</td>
		</tr>
	<!-- END: loop_block -->
</table>
<!-- END: block_table -->
</body>
</html>
<!-- END: main -->

File PHP: bai3.php

PHP Code:


<?php

    include 'xtemplate.class.php';

    $tpl =& new XTemplate;

    

    //Tạo 1 mảng

    $arr = array(1 => array('ID' => '10',

                            'NAME' => '1024KB',

                            'AGE' => '24'),

                    array('ID' => '11',

                        'NAME' => '1024MB',

                        'AGE' => '25'),

                    array('ID' => '12',

                        'NAME' => '1024GB',

                        'AGE' => '26'));

    $count = count($arr);

    for($i=1;$i<=$count;$i++){

        //Gán giá trị

        $tpl->assign('DATA',$arr***91;$i***93;);

        //Parse giá trị

        $tpl->parse('main.block_table.loop_block');

        //XTemplate có thể Parse nhiều lần.

        $tpl->parse('main.block_table.loop_block');

        //Khi đó sẽ x2 array trên

        //Xuất nội dung

        $tpl->out('main');

?>

ViewSource khi chạy File bai3.php:

Code:

...
<table>
	<tr>
		<td>ID</td>
		<td>Name</td>
		<td>Age</td>
	</tr>
	<tr>
		<td>10</td>
		<td>1024KB</td>
		<td>24</td>
	</tr>
	<tr>
		<td>11</td>
		<td>1024MB</td>
		<td>25</td>
	</tr>
	...
</table>
...

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan