테마 문법
이윰빌더는 디자인과 프로그램의 영역이 완전히 분리된 템플릿(Template) 방식으로 제작되었습니다. 여기서 테마(템플릿)는 홈페이지의 모든 디자인 요소를 결정하는 핵심 영역입니다.
만일 이윰빌더의 테마를 제작하고자 하신다면 이장을 충분히 숙지하셔야 합니다.
PHP 프로그램을 위한 템플릿 엔진에는 다양한 종류의 것들이 있습니다.
이중 대표적인 것에는 Smarty Template, Fast Template, Dwoo Template 그리고 이윰빌더가 사용하는 Template_(템플릿언더바) 이 있습니다.
이윰빌더의 테마(템플릿)에서 사용하는 템플릿 문법을 보다 상세히 알고자 한다면, 위 템플릿언더바 홈페이지(http://xtac.net)를 방문하여 스터디하실 것을 적극 권장합니다.
이윰빌더 템플릿(테마) 문법
이윰빌더의 테마는 템플릿언더바의 템플릿과 같은 의미입니다.
1. 템플릿이란?
템플릿이란?
프로그램과 디자인을 분리하여 프로그램 및 디자인 각각 간결하고 독립된 인터페이스를 제공합니다.
프로그램과 디자인을 분리하여 프로그램 및 디자인 각각 간결하고 독립된 인터페이스를 제공합니다.
2. 테마용 템플릿 태그
템플릿 태그는 템플릿 파일(테마내의 파일들)내에서 템플릿 엔진이 해석할 영역을 표시합니다. 아래는 템플릿에서 사용하는 템플릿 태그들입니다.
{}, <!--{}, {}-->, <!--{}-->
어떻게 쓰던지 모두 유효합니다.
3. 변수출력
예제
예제
abc.php
<?php // 스칼라 변수 $str = 'this is foo!'; $a = 500; $b = 1000; // 배열변수 [순차배열] $arr[0] = 10; $arr[1] = 30; $arr[2] = 50; // 배열변수 [연관배열] $config['color'] = '#ff3300'; $config['size'] = '12pt'; // 템플릿에 변수 할당하기 $tpl->assign(array( 'title' => '공지사항', 'content' => '여기는 출력되는 내용', 'arrvar' => $arr, 'config' => $config, )); ?>
abc.skin.html
<html>
<head>
<title>{title}</title> // (1) 할당된 스칼라 변수
</head>
<body>
<div>{content}</div> // (1) 할당된 스칼라 변수
<div>$a + $b = {_a+_b}</div> // (2) 할당하지 않은 스칼라 변수
<div>$a + $b = {=number_format(_a+_b)}</div> // (3) php 함수 사용
<div>$arr[0] + $arr[1] + $arr[2] = {arrvar[0]+arrvar[1]+arrvar[2]}</div> // (4) 할당된 순차배열 변수
<div> (5) 할당된 연관배열 변수
포트 컬러의 코드는 {config.color} 입니다.<br>
폰트 사이즈는 {config.size} 입니다.<br>
</div>
</body>
</html>
출력
<html> <head> <title>공지사항</title> // (1) 할당된 스칼라 변수 </head> <body> <div>여기는 출력되는 내용</div> // (1) 할당된 스칼라 변수 <div>$a + $b = 1500</div> // (2) 할당하지 않은 스칼라 변수 <div>$a + $b = 1,500</div> // (3) php 함수 사용 <div>$arr[0] + $arr[1] + $arr[2] = 90</div> // (4) 할당된 순차배열 변수 <div> (5) 할당된 연관배열 변수 포트 컬러의 코드는 #ff3300 입니다.<br> 폰트 사이즈는 12pt 입니다.<br> </div> </body> </html>
설명 Note! 아래의 순번은 위 코드의 주석처리된 숫자에 대한 설명입니다.
- 할당된 스칼라 변수 : 프로그램에서 사용한 변수값을 그대로 출력합니다.
- 할당하지 않은 스칼라 변수
- $tpl->assign 함수로 할당된 변수와는 달리 프로그램에서 선언된 모든 변수들은 템플릿 파일 내에서 php 변수명을 지정하는 $(달러표시)를 _(언더바)로 변경하여 바로 사용하실 수 있습니다.
-
Super Global 변수들은 별도의 선언없이 템플릿 파일에서 바로 사용할 수 있습니다.
예) 슈퍼글로벌 변수의 사용 예Super Global 변수 템플릿 태그 $_GET['abc'] {_GET.abc} $_POST['abc'] {_POST.abc} $_SESSION['abc'] {_SESSION.abc} $_SERVER['REMOTE_ADDR'] {_SERVER.REMOTE_ADDR} -
프로그램에서 정의한 상수는 상수명 앞에 C 또는 c를 붙여 상수값으로 사용할 수 있습니다.
정의된 상수 템플릿 태그 define('G5_MYSQL_HOST', 'localhost'); {C.G5_MYSQL_HOST}
- php 함수 사용
- 템플릿 파일에서는 php 함수를 바로 호출하여 사용할 수 있습니다.
-
규칙 : {=함수명()}
예) substr() 함수 사용템플릿문법 출력 {config.size} 12pt {=substr(config.size,0,-2)} 12
- 할당된 순차배열 변수
- 할당된 순차배열 변수는 템플릿 태그를 이용해서 바로 사용하시면 됩니다.
- 할당된 연관배열 변수
- 할당된 연관배열 변수는 hash값을 ''로 감싸는 대신 .(점)을 이용하여 표현하시면 됩니다.
4. 루프문
템플릿 태그 문법
| 명령어 | 의미 | 사용법 |
|---|---|---|
| @ | 루프의 시작 | {@ loop_id} |
| : | 루프가 돌지 않았을 때 출력(옵션) | {:} |
| / | 루프의 끝 | {/} |
예약어
| 예약어 | 의미 | 사용법 |
|---|---|---|
| index_ | 0 부터 시작, 루프가 반복할 때 1 씩 증가 | {loop_id.index_} |
| size_ | 루프의 전체 반복 회수 or 루프 배열의 count수 | {loop_id.size_} |
| key_ | 루프로 할당된 배열의 키 | {loop_id.key_} |
| value_ | 루프로 할당된 배열의 값 | {loop_id.value_} |
예약어 앞에 사용하는 loop_id는 생략할 수 있습니다.
예약어 중 .size_는 해당 루프 밖에서도 사용할 수 있으나 루프문 밖에서는 loop_id를 생략할 수 없습니다.
예제
abc.php
<?php
$loop = array(
array(
'name' =>'banana',
'color'=>'yellow',
),
array(
'name' =>'apple',
'color'=>'red',
),
);
$tpl->assign('list', $loop);
?>
abc.skin.html
<table>
<!--{@ list}-->
<tr id="fruit_{.index_+1}">
<td>{list.name}</td>
<td>{list.color}</td>
</tr>
<!--{:}-->
<tr>
<td colspan="2">출력 결과가 없습니다.</td>
</tr>
<!--{/}-->
</table>
<div>총 {list.size_} 종류의 과일이 있습니다.</div>
출력
<table> <tr id="fruit_1"> <td>banana</td> <td>yellow</td> </tr> <tr id="fruit_2"> <td>apple</td> <td>red</td> </tr> </table> <div>총 2 종류의 과일이 있습니다.</div>
5. 분기문 (IF문)
템플릿 태그 문법
| 명령어 | 의미 | 사용법 |
|---|---|---|
| ? | if | {? expression} |
| : | else, else if | {: expression}, {:} |
| / | endif | {/} |
예제
abc.php
<?php
$tpl->assign('fruit', 'banana');
?>
abc.skin.html
abc.skin.html
<!--{? fruit=='apple' || person=='santa' }-->
<div> red </div>
<!--{: fruit=='banana' }-->
<div> yellow </div>
<!--{: fruit=='orange' }-->
<div> orange </div>
<!--{:}-->
<div> unknown </div>
<!--{/}-->
출력
<div> yellow </div>