XE Template Syntax

XE 템플릿 구문

템플릿(template)이란 붕어빵을 만드는 틀로 비유된다. 같은 모양, 같은 크기의 객체(object)를 만들기 쉽다. 프로그래밍 언어에서 템플릿 구문은 초등학교 시절의 플라스틱 모형자를 생각하면 이해가 쉽다. 제각각 다른 모양, 다른 크기로 그려지는 삼각형도 모형자 하나만 있으면 모두들 똑같은 삼각형을 그려낸다...^^
XE코어도 대부분 PHP로 작성되는 오픈소스 프로그래밍 언어이다. 따라서 언어의 특성상 작성자 특유의 즐겨쓰는 구문이나 코딩법들이 사용될 가능성이 크다. 이것을 어떻게 일관된 규칙과 문법으로 유지시켜 나갈 수 있을까?

"XE 템플릿 구문이란, 동적 데이터의 화면 출력을 효과적으로 제어하기 위해 PHP로부터 프리젠테이션 로직을 분리한 코드이다."라고 메뉴얼은 설명한다.   프리젠테이션 로직이란 보여주기 위한 로직, 즉 화면상의 디자인 구성을 위한 로직을 일컫는 말로써, 모듈의 템플릿, 위젯, 애드온, 게시판의 스킨 등에서 사용하기 위한 조건문과 반복문(if, for, while)을 간결한 소스 코드로 분리하였다는 뜻이다. 이것은 다른 프로그래밍 언어들처럼 XE 안에서만 특별히 사용하기 때문에 XE 템플릿 문법이라 표현하고 화면에 표시할 때는 서버 측에서 다시 PHP 문법으로 해석(compile)되어 출력된다.

XE 템플릿 문법의 장점

• 간결 - 스킨의 소스 코드를 약 절반 정도로 간결하게 줄여서 용량을 절약할 수 있다.
• 판독 - HTML 태그에 기반하여 문법을 작성하기 때문에 조건문과 반복문의 시작과 끝을 찾기가 쉽고, 문법적 오류를 줄일 수 있다.

XE 템플릿 문법의 사용법

• HTML 주석 <!--...-->안에 작성하는 방법. 예) <!--@if(...)-->...<!--@end-->
• 가상의 <block> 요소 안에 작성하는 방법. 예) <block>...</block>
• HTML 요소에 직접 작성하는 방법. 예) <p cond="조건절">...</p>
• 주석이나 요소에 의존하지 않고 작성하는 방법. 예) {$content} 내용 변수로 데이터를 출력함.

※ 가상요소(block)란, HTML 요소의 형식을 빌려 쓰고는 있지만 제어문을 실행할 뿐 실제로 화면에 요소가 출력되지는 않는다. cond 속성도 가상의 속성으로서 조건문 역할을 한다.

---

XE 템플릿 문법의 이해

다음 구문은 PHP의 IF 조건문이다. PHP는 HTML 문서 안에서 HTML 태그와 혼합하여 사용할 수 없다. PHP는 서버에서만 읽고 해석하는 서버측 스크립트 언어이고 HTML은 웹브라우저에서 읽고 해석하는 마퀴업 언어이기 때문이다.

<?php
   if(조건식) {
      실행문1
   } else {
      실행문2
   }
?>

따라서 실행문의 내용이 HTML 태그를 포함한다면 실행문은 태그를 포함한 echo문으로 작성되어야 하고 다음과 같다.

<?php
   if($a=1) {
      echo "<p>조건식이 TRUE이면 실행문1이 표현된다.</p>";
   } else {
      echo "<p>그밖에는 실행문2가 표현된다.</p>";
   }
?>

만약 echo문을 사용하지 않고 PHP 구문과 HTML 구문을 분리하여 작성한다면 다음과 같다.

<?php  if($a=1) { ?>
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<?php } else { ?>
   <p>그밖에는 실행문2가 표현된다.</p>
<?php } ?>

그런데 위와 같이 구문을 나누고 보니 무척 복잡해 보이고 문제가 있는 경우에 오류의 원인을 찾기가 쉽지 않다. 따라서 많은 개발자들이 PHP 프로그래밍 작업에서 약식 출력(<?=...?>) 또는 짧은 태그(<?...?>)를 사용하기도 하지만 XHTML 문서에서는 이렇게 사용되는 경우 치명적인 오류가 발생한다. 따라서 HTML 태그와 구분된 PHP 코드를 HTML 주석문(<!-- -->)과 앳 기호(@)를 이용해 다음과 같이 약속해보자!!!

<!--@if($a=1)-->
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<!--@else-->
   <p>그밖에는 실행문2가 표현된다.</p>
<!--@end-->

이렇게 약속된 표현방법을 XE 템플릿 문법이라 말하고 HTML 주석문 안에 @ 기호를 이용해 작성된 구문은 서버에서 다시 PHP문으로 해석(compile)되어 출력되는 것이다.

 

 

결과적으로 XE 템플릿 문법은 HTML 문서 안에서 PHP 구문을 대신하여 사용하기 위한 약속된 템플릿용 언어이다. 따라서 XE의 레이아웃과 모듈의 템플릿 스킨, 게시판의 스킨 등에서 사용되는 템플릿용 구문이라고도 할 수 있으며 다른 언어에서는 사용되지 않기 때문에(배울 수 없기 때문에) 약간의 공부가 필요하다.

이와 유사한 형식의 템플릿 언어가 jQuery이다.

<script type="text/javascript">
<!--
	function sayHello() {
		document.getElementById('text1').innerHTML = '우주 정거장을 닮은 XE!';
	}
//-->
</script>

위와 같은 스크립트 블록 내부에 sayHello()라는 javascript 함수를 정의하였다면 아래의 텍스트를 클릭해 보자.

XpressEngine은...

문서 안에서 해당하는 엘리먼트를 찾아 텍스트를 바꾸어 주는 javascript 함수 구문이지만 모든 웹브라우저에서 같은 결과를 얻을 수 있다고는 말할 수 없다. 왜냐하면 브라우저마다 javascript를 동일하게 지원하지 않는다. 따라서 다양한 종류의 브라우저에서 동일한 결과를 얻기 위한 노력으로, 자기 자신 스스로가 사용할 목적의 작은 함수 라이브러리를 만들고, 직접 호주머니에 넣고 다니면서 미리 약속된 문법을 사용하여 모형자처럼 템플릿 언어로 만든 것이 jQuery이다.

// 자신이 사용할 jQuery 함수 라이브러리 파일을 원격으로 불러올 수도 있다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
   jQuery(function($) { // javascript가 아닌 jQuery라고 이야기 한다.
      $('#text2').click(function() { // 미리 정의된 함수 이름을 불러 선택된 엘리먼트가 해야 할 일을 가르쳐 준다.
         $('#text2').html('우주 정거장을 닮은 XE!'); // 선택자의 텍스트를 바꾼다.
      });
   });
</script>

XpressEngine은...

위에 작성한 jQuery 구문은 먼저 작성한 javascript 구문과 동일한 결과를 얻을 수 있지만 차이점은 대부분의 웹브라우저에서 같은 결과를 보여준다는 것이다. 왜냐하면 자신이 사용할 함수 라이브러리를 미리 불러 놓았고, 미리 정의된 템플릿 구문을 이용하여 문서내 엘리먼트를 찾아서 바꾼다. 이것 또한 약속된 언어이기 때문에 정의되지 않은 함수 구문을 사용할 수 없고 좀더 많은 공부가 필요하지만 동적인 웹페이지를 개발하는데 꼭 필요한 언어가 되었다.

XE 코어의 호주머니 속에는 이미 jQuery 함수 라이브러리를 가지고 있어서 별도의 라이브러리 파일을 불러올 필요가 없다. 따라서 XE에서 사용되는 레이아웃, 모듈의 템플릿, 게시판의 스킨 등에서 jQuery 함수를 마음껏 사용할 수 있는데 그러면, XE 템플릿 구문은 어떤 파일을 참조하고 있을까?

이것을 이해하기 위해 여기까지 왔다!

정답은 xe/classes/template/TemplateHandler.class.php 함수 라이브러리 파일이다. 이곳에서 XE가 사용하는 템플릿 구문이 PHP문으로 해석(compile)되어 출력되는 것이다. XE가 사용하는 함수 라이브러리 파일을 꼭 읽어보자! 그러면 XE와 좀더 가까워 질 수 있다...^^

 

 

XE Template Syntax

XE 템플릿 문법의 기본

1. 변수

PHP에서 변수를 다루는 것과 동일한 방법으로 XE 템플릿 안에서 변수를 정의하고 출력할 수 있다.

변수를 나타내는 문자열 앞에는 달러($) 기호를 붙여 사용하며 변수명은 대소문자를 구별한다. 변수는 프로그램에서 미리 선언한 내용 또는 템플릿 안에서 사용자의 필요에 따라 새로운 변수를 정의하고 출력할 수 있다.

 

[변수의 선언]

변수를 사용하려면 중괄호({...}) 안에 앳 기호(@)를 머릿글로 시작하여 한줄로 간단히 작성한다. 한줄로 작성되는 구문에는 구문 마침 기호 세미콜론(;)를 사용하지 않아도 된다.

{@ $a = 5} // 변수 $a에 숫자 5를 대입한다.

{@ $a = "XpressEngine"} // 변수 $a에 문자열을 대입한다.

{@ $a = array("XpressEngine","XEschool","XEnote")} // 변수 $a에 배열값을 대입한다.

위와 같이 템플릿 안에서 작성된 구문은 XE가 PHP문으로 변환하여 다음과 같이 읽고 해석한다.

compile...
<?php $a = 5; ?>
<?php $a = "XpressEngine"; ?>
<?php $a = array("XpressEngine","XEschool","XEnote"); ?>

 

[변수의 출력]

 

변수의 내용을 출력하려면 중괄호({...})에서 앳 기호(@)를 제외한 {$변수} 형태로 작성한다. 변수의 출력을 요청 받은 XE는 PHP문의 print() 함수를 이용하여 변수의 값을 출력한다.

{ $a } // 변수 $a의 값을 출력한다.

compile...
<?php @print($a); ?>

결과값 : Array

※ 모든 PHP 표현식(expression)은 "@"를 앞에 붙이고 호출되면 error reporting을 하지 않는다. 그런데 XE에서는 템플릿 구문에 오류가 있는 경우 백지화면을 보여주거나 레이아웃이 깨진다.

{ $a[1] } // 변수 $a가 배열이기 때문에 배열요소를 출력한다.

compile...
<?php @print($a[1]); ?>

결과값 : XEschool

변수 속의 변수, 변수 속의 함수의 출력은 다음과 같은 형식으로 출력한다.

{$string} // 변수의 출력
{$string->string} // 변수 속의 변수의 출력
{$string->string->string}
{$string->string()} // 변수 속의 함수의 출력
{$string->string(string | integer)}

변수에 함수를 연결하려면 '하이픈과 꺽은 괄호(->)'를 사용한다. 함수 이름 뒤에는 항상 소괄호()가 붙으며 소괄호에는 함수의 내용으로 문자열이나 정수를 포함할 수 있다. 변수 또는 함수는 미리 선언된 이름만 사용할 수 있다.

---

2. XE core 변수

"XE core 변수"란 XE 코어에서 사용하는 변수를 말한다. XE 코어 변수는 여러 모듈에서 두루 사용할 수 있다. 특정 모듈에서만 사용할 수 있는 변수들도 있는데 이런 변수들은 그냥 "변수"라고 부른다.

$is_logged		//사용자의 로그인 여부를 확인하는 변수
$logged_info	 // 로그인 사용자에게 자신의 회원정보를 보여 줌
$logged_info->user_id		// 로그인 사용자 아이디
$current_url	// 현재 페이지 URL
$module_info	// 모듈 정보로서 현재 모듈의 정보를 보여 줌

※ 스킨 제작 메뉴얼 p.29 참고

[활용 예제]

레이아웃 :

• {$layout_info->logo_image} // 레이아웃 info.xml에서 설정된 로고의 이미지 파일 출력
• {$lang_supported[$lang_type]} // 현재 설정된 언어를 출력, [] 배열에 접근한다.
• {$val1['link']} // gnb 메뉴에서 반복문(loop)을 통해 키($key)와 값($value)으로 얻은 배열의 값을 출력
• {$layout_info->colorset} // 설정된 컬러셋의 값을 출력
• {$content} // XE의 내용변수로 모듈의 모든 내용을 이곳에 출력한다.

게시판 모듈 스킨 :

• {$module_info->header_text} // 게시판 헤더에 출력할 내용
• {$lang->document_count} {number_format($total_count)}// 문서의 전체 갯수를 문자열과 숫자로 출력
• {$lang->cmd_view_member_info} // 회원정보수정 문자열 출력($lang는 언어팩을 참조한다.)
• {$document->getExtraValueHTML($val->idx)} // 사용자 선언 확장변수의 출력
• {$oDocument->getTitle()} // 문서의 제목 출력
• {$oDocument->getContent()} // 본문 내용 출력
• {$category_list[$oDocument->get('category_srl')]->title} // 분류명 출력
• {htmlspecialchars($tag)} // 태그 출력
• {$file->source_filename} // 업로드 된 파일명 출력
• [File Size:{FileHandler::filesize($file->file_size)}/Download:{number_format($file->download_count)}] // 파일정보 출력
• {$oDocument->getEditor()} // 에디터 출력

---

3. 간단한 PHP문 사용

XE 스킨 파일(HTML)에서는 PHP 문법을 사용할 수 없지만, 중괄호 {...} 안에 앳 기호(@)를 포함하면 간단한 PHP 문장을 사용할 수 있다. 이때 하나의 문장은 하나의 줄에 작성해야 하고, 여러 개의 문장인 경우 여러 줄로 나누어 작성한다. 여러 줄 작성시에는 세미콜론(;) 기호로 구문 종료를 알린다. PHP문은 마지막 "?>" 문장을 만날때까지 한줄 한줄 파서(parser)하는데 세미콜론(;)을 만나면 "해야 할 일 하나가 끝났구나!"라고 생각한다. 그리고 마지막 "?>" 문장은 자동으로 구문이 끝났다는 것을 알려주니까 세미콜론(;)이 필요없는 것이다.

[작성 문법]

{@ $is_logged=Context::get('is_logged')} // 하나의 문장

{@
$test=364; 
$test=$test*$test
}

PHP문으로 변환된 구문은 실행결과를 출력하지는 않는다.(_compileVarToSilenceExcute)

compile...
<?php 
   내용; 
?>

[활용 예제]

레이아웃 :

• {@ $layout_info->colorset = "default"} // 변수에 default 문자열을 대입한다.

게시판 모듈 스킨 :

• {@ $module_info->thumbnail_width = 100; } // 썸네일 이미지의 가로크기를 설정한다.
• {@ $module_info->default_style = 'list'} // 리스트 보기로 설정한다.(문자열 대입)
• {@ $tag_list = $oDocument->get('tag_list') } // 태그 목록을 가져와 대입한다.
• {@ $uploaded_list = $oDocument->getUploadedFiles() } // 업로드 파일 목록을 가져와 대입한다.

---

4. 위젯 삽입 코드

위젯 삽입을 위한 템플릿 코드는 <img /> 요소에 widget이라는 속성을 포함하고 있다. <img /> 요소는 HTML 표준이기도 하지만 widget이라는 속성을 포함하게 되면 XE 템플릿 문법으로 해석되어 서버에서 표준 HTML로 변환된다. 또한 위젯 출력에 필요한 속성들을 함께 가지고 다닌다. 만약 같은 위젯인 경우 컬러 옵션에 "흰색" 속성이 있는 경우 colorset 속성을 "white"로 직접 수정해도 적용된다.

<img class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="default" />

위젯의 코드생성은 결국 위젯이 가지고 있는 선택 옵션들을 <img /> 태그안에 속성과 값으로 정리하여 보여주는 역할을 하는 것이다.

 

 

 

XE Template Syntax

파일 포함 include / import / load

XE 템플릿 스킨의 HTML 문서 안으로 외부 파일을 불러와 포함시키기 위한 문법이다. 파일 포함 문법에서는 불러 들이고자 하는 외부 파일의 경로 설정을 상대 경로로 표시한다. 즉 HTML 문서의 자신을 기준으로 상대적인 위치의 경로를 이용한다. HTML 문서가 있는 같은 폴더 안의 default.css 파일을 포함한다면 import("default.css")가 된다. 만약 하위 폴더 JS 안에 있는 파일을 포함한다면 import("js/default.js")가 된다.
스킨의 HTML 문서 안에서 작성된 파일 포함 구문은 XE 코어가 자신의 완성된 HTML 문서의 <head>..</head> 영역 안으로 가지고 올라가서 원래의 스크립트 문으로 변환한다. 따라서 포함 여부를 확인하려면 소스보기를 이용해 <head> 블록 안에서 <link rel="stylesheet" type="text/css" href="default.css" />와 같이 목표(Target)가 되는 파일의 이름이 있는지 확인하도록 한다.(import/load 해당)

1. include 문

스킨을 제작할 때 여러 페이지에 걸쳐 반복되는 콘텐츠 블록이 있으면 별도의 파일로 분할하여 관리하는 것이 편리하다. 하나의 파일만 수정하면 여러 페이지에 걸쳐 한 번에 적용할 수 있기 때문이다.

[작성 문법]

<!--#include("header.html")-->
<include target="header.html" />

<include /> 요소는 HTML 표준 요소가 아니지만, HTML 태그의 형식을 빌려 쓰고 있다. include는 별도의 파일을 현재 페이지로 불러오는 PHP문의 include() 명령어와 유사한데 target 속성을 이용해 특정 목적파일을 포함시키는 방법이 다르다.

[변환 형식]

<?php
   print('변환된 파일의 객체 내용');
<?>

포함시키려는 파일의 내용은 TemplateHandler.class.php 함수 라이브러리를 이용해 객체($oTemplate)로 생성된 후 다시 컴파일(compile) 되어 print() 된다. 따라서 아래 import문 처럼 파일을 포함한다는 스크립트를 추가하는 것이 아니고 목적파일의 내용을 가져와 그 코드(code)를 포함시키는 것이다. PHP문의 include() 함수와 그 기능이 동일하다.

---

2. import 문

HTML 주석(<!-- -->) 태그와 퍼센트(%) 기호를 혼합하여 외부 파일(CSS, JS, XML JS 필터)을 불러(import/포함)온다. 이때 CSS, JS 파일은 HTML <head> 요소 안에 포함시키지만 XML JS 필터 파일은 <body> 요소가 끝나기 직전에 포함시킨다.(XE 코어 1.4.4 버전 이후 무조건)

• XML JS 필터 : XML 형식으로 입력 항목을 정의해 두고 폼을 전송할 때 유효성 검사를 자동으로 수행하는 기능 파일, 유효성 검사는 XML 기반으로 자동으로 변환된 자바스크립트가 수행하므로, 사용자는 복잡한 자바스크립트를 작성할 필요가 없다. XML JS 필터는 유효성 검사를 통과한 폼 데이터를 어떤 모듈의 어떤 명령어로 보낼 것인지 정하는 기능도 있다. XE 코어 1.4.4 이전에는 다른 파일과 동일하게 <head> 요소 안에 출력되었지만 1.4.4 이후에는 무조건 <body> 요소가 끝나기 직전에 출력된다.

[작성 문법]

<!--%import(“default.css")--> // head 요소 영역에 포함(CSS 파일)
<!--%import(“default.js")--> // head 요소 영역에 포함(JS 파일)
<!--%import(“xe.xml")--> // <body> 영역 최하단에 포함(XML JS 파일)

[변환 형식]

<head>
   <link rel="stylesheet" href="default.css" type="text/css"  charset="UTF-8" media="all" />
   <script type="text/javascript" src="default.js"></script>
</head>

<body>
...

   <script type="text/javascript" src="xe.js"> // <body> 영역 최하단에 출력
</body>

---

3. load 문

XE가 미리 약속해 둔 가상 태그(<load />)를 이용해 작성할 경우 속성을 추가할 수 있다. load 태그는 HTML에 없는 태그이기 때문에 XE만 사용하는 가상 태그라고 부르는 것이다. 변환 형식의 결과는 import문과 동일하다.

[작성 문법]

<load target="default.css" />
<load target="default.js" />
<load target=“xe.xml" /> // <body> 영역 최하단에 출력하는 것은 동일하다.

① CSS에서의 [media] 속성

<load target="default.css" media="print" />

CSS 파일의 대상이 되는 미디어를 선택하여 지정하게 되면 해당 출력 장치에 대응하여 작동한다. media 속성은 쉼표를 사용하여 여러 개를 지정할 수 있고 없는 경우 기본값은 media="all" 이 되며 다음과 같은 결과를 얻는다.(※ media 속성 값은 [스킨 제작 메뉴얼] p.33 참고)

<link rel="stylesheet" href="default.css" type="text/css" charset="UTF-8" media="print" />

② JS에서의 [type] 속성 : 참조 선언 위치

<load target="default.js" type="body" />

JS 파일을 body 요소 안에 불러오는 경우 type="body" 속성을 추가한다.(기본값은 <head> 요소에 포함된다.) 결과값은 다음과 같다.

<body>
...
   <script type="text/javascript" src="default.js">
</body>

③ 공통 [targetie] 속성 : IE 조건부 주석의 사용

targetie 속성을 사용하면 외부 파일의 참조를 IE의 특정 브라우저 버전에서만 해석할 수 있도록 조건부 주석으로 출력한다. 속성의 이름을 보면 알 수 있듯이 적용을 목표로 하는 타겟(Target)이 익스플로러(IE)이고 버전을 함께 부탁한다.(Target + IE = targetie) ※ 기본값은 빈 값으로 "적용 안 함"이다.

<load target=“default.css" targetie="IE 6" />
<load target=“default.js" targetie="IE 6" />

IE 조건부 주석을 사용하는 경우 IE6 버전의 브라우저는 주석으로 처리하지 않고 해석하여 적용한다. 처리 결과는 다음과 같다.

<!--[if IE 6]>
   <link rel="stylesheet" type="text/css" href="default.css" />
<![endif]-->

<!--[if IE 6]>
   <script type="text/javascript" src="default.js">
<![endif]-->

④ 공통 [index] 속성 : 참조 선언 순서 변경

<load target=“default.css" index="-1" />

<load target=“default.js" index="-1" />

index 속성을 사용하면 외부 파일의 참조 선언 순서를 변경할 수 있다. index 속성의 값은 양의 정수 또는 음의 정수를 사용할 수 있으며, 음의 정수를 사용하면 더 빨리 선언할 수 있고, 양의 정수를 사용하면 더 늦게 선언할 수 있다. index="-1" 값을 지정하면 다른 CSS 파일보다 한 줄 빠른 위치에서 선언된다. CSS 파일은 동일한 명령이 충돌하는 경우 나중에 선언된 값이 우선순위를 갖기 때문에 우선순위를 높게 두어야 하는 경우 나중에 선언하는 것이 좋다.

---

※ unload 문

unload문은 load 문과 반대로 경로가 일치하는 CSS, JS, XML JS 필터의 파일 포함을 제외시키는 명령어이다. 하지만 사용되는 예가 없고 사용할 일도 거의 없는것 같다...^^

 

 

XE Template Syntax

조건문 IF / cond

주어진 조건에 따라 필요한 내용을 문맥에 알맞게 출력하거나 배제할 때 조건문을 사용한다.

1. IF 문

IF 조건문은 PHP의 IF 조건문과 동일하고 "if, elseif, else, end"와 "조건식"으로 이루어져 있다. if 문이 시작되면 반드시 end 문으로 닫아서 조건문이 끝났음을 선언해야 하고 조건식의 내용은 PHP문으로 해석되기 때문에 PHP에서 사용 가능한 여러 가지 연산자(&&, ||, ==, ! 등)의 사용이 가능하다.

[작성 문법]

<!--@if($a==1)--> // 조건식1이 참(TRUE)이면 포함된 내용을 실행
   <p>Welcome XE!</p>
<!--@elseif($a==2)--> // 조건식1이 거짓(FALSE)이고 조건식 2가 참(TRUE)이면 포함된 내용 실행 
    <p>Welcome XpressEngine!</p>
<!--@else--> // 조건식 1,2가 모두 거짓(FALSE)이면 포함된 내용 실행
    <p>Welcome XEschool!</p>
<!--@end-->

XE 템플릿 스킨 등에서 작성된 IF 조건문은 PHP문으로 해석되어 다음과 같이 출력된다.

compile...
<?php if ($a==1) { ?>
   <p>Welcome XE!</p>
<?php } elseif ($a==2) { ?>
   <p>Welcome XpressEngine!</p>
<?php } else { ?>
   <p>Welcome XEschool!</p>
<?php } ?>

위와 같이 PHP문과 HTML 태그가 분리된 형식을 회피(Escaping in PHP) 구문이라고 한다. XML이나 XHTML 안에 PHP 코드를 내장시키려면 XML과 호환될 수 있도록 <?php ... ?> 형을 써야 한다. 약식 출력(<?=...?>) 또는 짧은 태그(<?...?>)를 사용하면 XHTML 문서에서는 오류가 발생한다. 따라서 XE 템플릿 문법에서 <!--@ ... --> 의 사용은 항상 PHP문으로 해석할 때 <?php ... ?>를 포함하게 되는 것이다. 그러면 HTML 표준에 따른 주석 <!-- ... -->문은 어떻게 될까? 너무 걱정하지 않아도 된다. <!-- ... -->과 <!-- // ... --> 모두 앳 기호(@)가 없기 때문에 주석문으로 계속 사용이 가능하다. 별걱정 다한다...^^

<!--@if($is_logged)--> 
   <h2>당신은 로그인하셨습니다!</h2>
<!--@else--> 
   <h2>당신은 로그인하지 않으셨습니다!</h2>
<!--@end-->

결과값 :

당신은 로그인하지 않으셨습니다!

IF문 안에 또 다른 IF문도 포함(중첩)시킬 수 있다. 모든 HTML 태그의 사용도 가능하다. HTML 문서 안에서 보여주거나 보이지 말아야 할 내용을 동적으로 제어하기 위해 PHP 코드(code)를 분리한 것이 바로 XE 템플릿 문법이다. 대단히 복잡하게 보일 수 있는 코딩을 무척 간결하면서도 판독이 쉽도록 문법화 되어 있다. 다만 문법이기 때문에 한 글자라도 틀리면 오류가 발생한다...^^

IF문에서의 조건식 안에는 일반 변수를 이용한 조건식 뿐만 아니라 모든 "XE core 변수"를 이용한 조건식도 가능하다. 만약 로그인 여부에 따른 조건식을 꾸미면 다음과 같다. 만약 로그인 회원의 회원정보에서 홈페이지가 있는 경우 홈페이지 주소를 출력해 보자!

<!--@if($is_logged)-->
   <!--@if($logged_info->homepage)-->
      <h3>홈페이지 : {$logged_info->homepage}</h3>
   <!--@else-->
      <h3>아직 홈페이지가 없으시군요!</h3>
   <!--@end-->
<!--@else-->
   <h3>당신은 로그인하지 않으셨습니다! 로그인해 주세요!</h3>
<!--@end-->

결과값 :

당신은 로그인하지 않으셨습니다! 로그인해 주세요!

위와 같이 IF문 안에 작성된 코드 블록 영역은 조건식에 의한 결과값에 따라 출력 여부를 결정한다.

---

2. block 문과 cond 속성

block문은 HTML 표준 요소가 아니다. 실제로 없는 것이나 마찬가지다. 그런데 누구를 닮았는가 하면 DIV를 닮았다. XE 코어가 DIV를 쏙 빼다 박은 <block>...</block> 요소를 하나 만들었다. 그래서 족보에도 없는 것을 새로 만들었기 때문에 가상 요소 또는 가상 태그라고 부른다...^^

<block>
   <p>DIV를 닮은 block 요소!</p>
</block>

결과값 : DIV를 닮은 block 요소!

그러면 div 태그로 변환되는 것일까? 잘 모르겠다. 함수 라이브러리에서 아무리 찾아보아도 어떻게 변환되는지 모르겠다...^^ 웹브라우저도 이놈을 처음 보았을 것이고 선택자(id,class) 또는 스타일(style)도 적용되지 않는다. 유령같은 놈이다. 그래서 나는 이놈을 가상 태그가 아닌 유령(Ghost) 태그(Tag)라고 부른다...^^ 따라서 DIV를 닮기는 했으나 DIV는 아니라고만 말할 수 있다. 왜냐하면, block 요소는 혼자 쓰이지 않는다. 마치 서양의 유령들처럼 큰 낫(scythe) 같은 것을 항상 가지고 다니는데 이것이 cond 속성이다. (condition/조건,상태,상황)

<block cond="!$is_logged">
   <h3>빨리 로그인 하시오! 만약 로그인 하지 않으면....오늘 밤...</h3>
</block>

유령 태그(block)가 큰 낫(???)을 들고 물어본다. 로그인 안했냐고! 만약 cond 속성을 이용한 조건식이 참(TRUE)이면 포함된 내용을 보여준다. 하지만 거짓(FALSE)이면 유령처럼 사라진다.

빨리 로그인 하시오! 만약 로그인 하지 않으면....오늘 밤...

block 이라는 가상 요소 안에 cond 속성(가상 속성)을 선언하고 있다. 이 cond 속성은 한줄 형태의 조건식을 포함하는데 IF문과 다른점은 예외(else) 사항이 없다. 무조건 유령 앞에서는 YES or NO 로 대답해야 한다...^^ 왜냐하면 PHP문으로 변환할 때 if(조건식) {...} 의 형태가 되기 때문이다. 만약 2가지 이상의 조건 형태로 작성하기 위해서는 다음과 같이 작성해야 한다.

<block cond="!$is_logged">
   <h3>빨리 로그인 하시오! 만약 로그인 하지 않으면....오늘 밤...</h3>
</block>
<block cond="$is_logged">
   <h3>잘 주무시오...^^</h3>
</block>

결과값 :

빨리 로그인 하시오! 만약 로그인 하지 않으면....오늘 밤...

그런데 이 큰 유령의 낫(?)이 전염된다. 다른 HTML 태그(요소)에서도 사용할 수 있다.

<p cond="조건식">Welcome XE!</p> // 태그 안에서 가상 속성(cond) 형식

HTML 표준 요소도 cond 속성만 가지면 "빨간 휴지 줄까? 파란 휴지 줄까?" 하고 물어보게 된다.
DIV, h1, h2, h3, p, ul, li.......etc,etc,etc...전염성이 무척 크다!

 

여하튼 "빨간 휴지 줄까? 파란 휴지 줄까?"하고 물어보는 h3 태그가 여기 있다.

<h3 style="color:#FF0000"|cond="$is_logged">빨간 휴지 줄까? 파란 휴지 줄까?</h3>

결과값 :

빨간 휴지 줄까? 파란 휴지 줄까?

h3의 cond 조건식은 참(TRUE) 또는 거짓(FALSE)이다. 하지만 cond 속성이 파이프(|,pipe)를 이용해 다른 속성과 연결되어 있으면, 이때 cond는 h3에 영향력을 행사하는 것이 아니라 파이프(pipe)로 연결된 속성에 제한된다. 만약 조건식이 참이면 폰트의 색을 빨간색으로 값을 추가하거나 변경한다. 거짓이면 연결된 속성과 함께 유령처럼 사라진다. 연결된 속성만 가지고 사라지기 때문에 항상 h3 태그의 내용물은 출력되는 것이다.

※ h3의 폰트는 class 선택자를 이용해 기본 파란색이다. 하지만 인라인 스타일 형식으로 최후에 선언된 스타일을 적용받게 되어 변경된다. 만약 CSS에서 미리 선언되어 있지 않았다면 추가되는 것이다. 연결할 수 있는 속성에는 클래스(class)도 가능하며 자유롭게 사용한다. 이때 연결되는 속성은 파이프(pipe)를 사이에 두고 빈칸 없이 붙여 작성한다.

<p attr="value"|cond="조건식">Welcome XE!</p>

// <p> 요소는 무조건 출력하는데 조건식이 참이면 attr="value" 속성과 값을 출력

 

[XE 템플릿 문법의 IF 와 cond 의 차이점]
IF문에서는 조건(condition)에 대해서 그밖의(else) 예외에 대한 내용을 포함할 수 있다.(PHP문과 동일) 즉 조건이 참(TRUE)이면 출력할 내용과 참(TRUE)이 아닌 경우에 대한 예외 출력문을 함께 사용할 수 있지만, cond는 태그 요소 또는 속성에서 인라인 형식으로 조건에 따라 출력 여부를 결정하고 끝낸다.

다시말해 IF문은 조건절<!--@if(조건식)--> 바깥 영역에서 출력에 대한 내용을 작성하고 <!--@elseif(추가 조건)-->과 함께 예외 구문 <!--@else-->를 포함한 출력형식을 작성 할 수 있는 반면, cond 속성문은 태그 안에서 자기 자신 스스로에게 조건에 따른 출력 여부를 결정하기 때문에 매우 간단한 형식의 구문을 작성할 수 있다. 또한 태그의 속성에도 조건을 이용해 접근할 수 있는 장점이 있다. cond 속성이 block 가상 요소와 함께 사용된다면 더 큰 힘을 발휘한다. 조건에 따른 요소들을 하나로 묶어두고 출력여부를 한곳에서 결정하기 때문이다. 따라서 2가지 문법의 차이점을 이해하고 block 가상 요소를 적절히 활용하면 매우 유용한 조건 구문을 작성할 수 있다.

 

 

 

XE Template Syntax

반복문 loop

주어진 조건에 따라 필요한 내용을 반복해서 출력해야 할 때 반복문(루프/loop)을 사용한다.

1. 반복문의 이해

반복문은 컴퓨터가 만들어지면서 가장 먼저 시도된 증조 할아버지뻘 되는 구문이고 문법이다. 1+1 은 쉽다. 하지만 1에서 10까지 더하라고 하면 약간 머리가 복잡해진다. 사람들이 컴퓨터를 만들고 가정 먼저 시도해 본 것도 이 문제를 해결하기 위한 것이다. 우리도 한번 해보자!

<?php
$a = 1;
$b = 1;
$c = $a + $b;

echo $c;
?>

결과값 : 2

그러면 1부터 10까지 더해보자.

<?php
$a = 1;
$b = 2;
$c = 3;
$d = 4;
$e = 5;
$f = 6;
$g = 7;
$h = 8;
$i = 9;
$j = 10;
$sum = $a + $b +$c +$d + $e + $f + $g + $h + $i + $j;

echo $sum; // 합계의 출력
?>

결과값 : 55

여기까지는 괜찮다. 하지만 만약 100까지 더하려면? 아니면 1000은? 그래서 다음과 같이 반복문(loop)을 만든다.

while 루프형
<?php
$i = 1; // 변수의 초기화
$sum = 0; // 합계의 초기화

while ($i <= 10) {
   $sum = $sum + $i; // 실행문
   $i++;
}

echo $sum; // 합계의 출력
?>

결과값 : 55

조건(while)이 만족할 때까지 while문 안의 실행문을 반복한다. 처음에 변수 $i 는 1을 대입한다. 이것을 초기화라고 한다. 왜냐하면 어디서부터 시작할 것인지를 결정하기 때문이다. 정수 1로 초기화 된 $i는 이제 본격적으로 조건식에 들어간다. 조건을 비교해 보니 아직 10보다 작거나 같지 않다. 조건이 참(TRUE)이다. 따라서 변수 $sum에 자신의 값 1을 더하고 다음 줄에서 하나 증가(++)한다. $i 는 2가 되었고 다시 조건을 확인해 본다. 아직 10에 모자르다. 따라서 10일 될 때까지 while문을 반복한다. 그동안 $sum은 1부터 차곡차곡 더해지고 있다. 마침내 $i가 11이 되면 조건식은 거짓(FALSE)이 된다. 그러면 실행문을 무시하고 반복문을 끝낸다. 기다리고 있던 echo문이 $sum을 찾아서 출력한다...^^

반복문에 있어서 가장 중요한 것은 조건식이다. 조건식이란 결국 몇 번을 반복할 것인가를 결정하는 중요한 단서이다. 위에서의 반복 조건은 $i가 10보다 작거나 같을때 까지이다. 따라서 10번을 반복했다. while 루프형(loop)은 매우 간단한 형식의 반복문이다.

이것을 for문으로 바꾸어 보자.

for 루프형
<?php
$sum = 0; // 합계의 초기화
for ($i = 1; $i <= 10; $i++) {
    $sum = $sum + $i; // 실행문
}

echo $sum; // 합계의 출력
?>

결과값 : 55

for문은 while문과 조금 다른 형식이다. 몇 번을 반복할 것인지에 대한 반복 횟수는 같다. 하지만 조건식의 구성이 조금 다르다. 좀 더 자세히 들여다 보자.

for (① ; ② ; ③) {
    ④; // 실행문
}

for 반복문이 실행되면 ①에서 초기화 한다. 이때 ①은 최초 한번만 실행한다. 변수 $i 에 1을 대입하여 초기화 한 후 ②로 넘어가면 ②는 참과 거짓을 따져 묻는 조건식이다. 그런데 진행방향이 여기서부터 달라진다. 거짓이면 반복문을 끝낸다. 하지만 참이면 ④로 가서 실행문을 실행하고 난 후 ③을 실행한다. ③은 변수 $i를 1씩 증가(++)시켜 주는 일만 한다. 즉 ④를 실행하고 오면 확인도장을 하나씩 찍어주는 것이다. 확인 도장을 받은 $i는 이제 도장이 2개가 된다. 왜냐하면 처음 for()문을 들어 올 때 이미 ①에서 1개의 도장을 받아 두었기 때문이다. $i는 신이나서 다시 ②로 간다. 그리고 참인지 거짓인지 물어본다. 아직 참이다. 다시 ④로 가서 실행문을 실행하고 ③에 가서 확인도장을 받는다...^^

열심히 뛰어다닌 결과 $i의 도장이 어느새 11개가 되었다. 조건식과 비교해보니 10보다 커서 거짓(FALSE)이 되었다. for()문을 끝내고 보니 받아둔 도장의 갯수는 11개이지만 실제로 반복한 횟수는 10번이다. 따라서 1부터 10까지의 합계가 $sum에 고스란히 저장 되었다.

for 루프형(loop)은 가장 복잡하지만 확인도장을 받아야 하는 재미있는 루프 구문이다.

이번에는 7색이 들어있는 색연필($crayon)이 있다. 이때 각각의 색 이름을 반복문으로 출력해 보자.

foreach 루프형
<?php
$crayon = array('빨강','주황','노랑','초록','파랑','남색','보라');

foreach ($crayon as $color) {
   echo '<p>☆ '.$color.'</p>';
}
?>

결과값 :

☆ 빨강

☆ 주황

☆ 노랑

☆ 초록

☆ 파랑

☆ 남색

☆ 보라

색연필($crayon)은 배열이다. 배열의 요소에 접근하기 위해서는 foreach문을 이용한다. foreach문은 주어진 배열($crayon)에 대해 순차적으로 반복(루프,loop)하면서 각 요소마다 접근한다. 그래서 for + each 이다. 각 루프에서 현재 배열 원소의 값은 변수 $color에 임시로 저장되고 내부적인 배열 포인터는 다음 요소로 이동하게 된다. foreach문이 처음 실행할 때, 내부적인 배열 포인터는 자동적으로 배열의 첫번째 원소를 가리킨다. 그리고 다음 루프에서 다음 배열 원소로 이동한다. 따라서 반복할 때마다 다음 배열 원소를 보게 되는 것이다.

foreach문은 반복 횟수를 결정하는 조건절이 없다. 배열의 요소 갯수가 반복 횟수가 되는 것이다. 좀더 쉽게 이야기하면 변수 $crayon이라는 아이가 있다. 이 아이는 색연필을 하나만 들고 있는 것이 아니라 여러개를 가방에 넣고 다닌다. 그래서 배열(array)이다. 가방속에 색연필이 몇개가 들어있는지 확인하려면 하나씩 하나씩(each) 꺼내보아야 한다. 몇번을 반복(for)해야 하냐면 가방속에 색연필이 없을때 까지이다. 따라서 배열을 확인하는 반복문은 foreach문으로 작성하고 반복 횟수는 자동으로 배열 요소의 갯수만큼이 된다.

이번에는 색연필($crayon)이 색 이름과 영어 이름의 배열로 이루어져 있다. 이때 각각의 색 이름을 반복문으로 출력해 보자.

foreach 루프형
<?php
$crayon = array(
   '빨강' => 'Red',
   '주황' => 'Orange',
   '노랑' => 'Yellow',
   '초록' => 'Green',
   '파랑' => 'Blue',
   '남색' => 'Navy',
   '보라' => 'Violet'
   );

foreach ($crayon as $key => $val) {
   echo '<p>☆ '.$key.' - '.$val.'</p>';
}
?>

결과값 :

☆ 빨강 - Red

☆ 주황 - Orange

☆ 노랑 - Yellow

☆ 초록 - Green

☆ 파랑 - Blue

☆ 남색 - Navy

☆ 보라 - Violet

색연필($crayon)의 배열 요소가 각각 키(key)와 값(value)을 갖고 있다. foreach문을 이용해 순차적으로 반복해서 루프를 돌 때 현재 배열 원소의 키(key)와 값(value)은 각 루프의 $key와 $val 변수에 나누어 임시 저장된다. 마찬가지로 배열의 요소 갯수가 반복 횟수가 된다.

---

2. XE 템플릿 구문에서의 반복문

반복문은 "foreach"와 "end"의 조건식으로 이루어져 있다. foreach문이 시작되면 반드시 end문으로 닫아서 반복문이 끝났음을 선언해야 한다. XE 템플릿 문법으로 작성된 반복문은 PHP문으로 변환하여 실행 된다. 따라서 위에서 살펴본 while, for, foreach문은 XE 템플릿 구문에서 동일하게 사용 된다.
다만, 앳 기호(@)가 포함된 주석문 <!--@ --> 안에 넣어 사용하기도 하고 block 가상 요소에서 loop 속성과 함께 사용하기도 한다. "loop"는 foreach문의 조건식을 표현할 때 사용하는 가상의 속성이다. 따라서 조건문(IF)에서 가상 속성으로 사용되는 cond 속성과 같은 방법으로 HTML 요소에서 사용하면 반복 횟수만큼 태그 요소와 얻은 값을 반복하여 출력할 수 있다.

위 반복문의 동작 원리를 이해하면 다음의 XE 템플릿 문법으로 작성된 메뉴얼 기본 예제도 쉽게 이해할 수 있을 것이다. XE 코어의 변수들은 대부분 배열 형태이고 키(key)와 값(value)을 가지고 있다. 반복 횟수 또한 그 배열이 가지고 있는 요소의 갯수가 된다.

[$key값 없이 사용하는 반복문]

<!--@foreach(변수명 as $val)-->  // $key값 없이 <tr>...</tr> 반복
   <tr>...</tr>
<!--@end--> 

<block loop="변수명=>$val">
   <tr>...</tr>
</block> 

<tr loop="변수명=>$val">...</tr>

[$key값 포함하여 사용하는 반복문]

<!--@foreach(변수명 as $key => $val)--> // $key값 포함 <tr>...</tr> 반복 
   <tr>...</tr>
<!--@end--> 

<block loop="변수명=>$key, $val">
   <tr>...</tr>
</block> 

<tr loop="변수명=>$key, $val">...</tr>

[반복 횟수 지정하여 사용하는 반복문]

<!--@foreach($i=0;$i<100;$i++)--> // 초기값 0부터 시작하여 <tr>...</tr> 100회 반복 
   <tr>...</tr>
<!--@end--> 

<block loop="$i=0;$i<100;$i++"> 
   <tr>...</tr>
</block> 

<tr loop="$i=0;$i<100;$i++">...</tr>

---

기본 레이아웃의 GNB 메뉴 구하기 반복문

 

xe.1.4.5.7/layouts/xe_official/layout.html
<div class="gnb">
  <ul>①
┌  <li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">②
│ⓐ     <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>③
│        <ul cond="$val1['list']">④
│   ┌     <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
│   │ⓑ      <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
│   └     </li>
│        </ul>
└  </li>
  </ul>
</div>

① <ul>은 반복문에 의해 생성되는 리스트(li) 항목을 가둬두는 싸개(wrapper) 역할을 한다.

② <li> 사용자가 생성한 메뉴트리는 $main_menu에 배열 형태로 담겨있다. 따라서 각 메뉴에 접근하려면 $main_menu->list 형식으로 요소에 접근하고, 현재 접근한 배열 원소의 값은 $key값을 포함하여 $key1 변수와 $val1 변수에 각각 임시 저장한다. 일단 ④번 <ul>이 없다고 생각해 보자. 배열 원소의 갯수만큼 <li>를 반복하는데 cond 조건이 하나 걸려있다. 이때 cond 는 파이프(pipe)를 이용해 클래스(class)와 연결되어 있다. <li>는 무조건 출력하지만 만약 현재 배열의 요소가 선택(selected) 되었다면 클래스를 추가한다는 뜻이다. 여기서의 선택이란, 메뉴트리에서 설정한 메뉴 항목의 이름과 연결 URL 즉 설정했던 모듈의 아이디(mid)가 같다는 뜻이다.

③ <li>가 반복되면서 $val1 임시 변수에 담겨진 해당 값(value)을 출력한다. 메뉴 항목의 이름이다. 배열의 요소에 접근하여 출력하기 위해 {$val1['link']}처럼 작성한다. 메뉴 항목의 이름을 클릭하면 설정된 모듈의 아이디(mid)로 이동하기 위해 {$val1['href']} 문으로 URL 링크를 만든다. 이때 cond 조건은 메뉴트리 설정에서 "새창열기"가 설정되어 있다면 새창을 열어서 보여줘야 한다는 의미이다. target 속성에만 제한된다. 따라서 메뉴항목의 이름은 무조건 출력된다. 2번에서 선택된 메뉴 항목의 이름이라면 CSS의 도움을 받아 선택 되었음을 알리는 스타일이 추가될 것이다.

④ 4번에서 <ul>의 cond 속성은 파이프형이 아니다. 따라서 조건에 따라 <ul>의 생사(?)가 결정된다. 조건의 내용은 이렇다. 2번 <li>를 반복할 때 $val1의 배열 요소 list에도 접근해 보자. 만약 list가 있다면, 이것은 "서브메뉴가 있다면?" 이란 뜻이다. 서브메뉴가 있다면 출력하고 없으면 <ul>과 함께 사라진다. 아주 무서운 조건이다. $val1['list'] 역시 배열 요소를 담고 있을 것이다. 이때 배열의 각 요소는 부모 요소와 구분하기 위해 각각 $key2과 $val2에 임시로 저장하는 것이다. ⓑ의 반복 내용은 ⓐ와 동일하다.

※ 이렇게 생성된 메뉴는 메뉴 항목(서브메뉴), 메뉴 항목(서브메뉴)... 식으로 반복 된다. 서브메뉴가 없는 메뉴는 항목만 출력될 것이다. 출력된 메뉴는 CSS 와 JS 스크립트(jQuery)의 도움을 받아 멋진 메뉴 UI로 변신하게 된다.

 

 

[출처] http://cubequest.org/xe/index.php?document_srl=144687&mid=xe_core