* User ID : leesungmin
* Homepage : https://4880.net
* Email : imadonis@naver.com
* Following : 랩퍼투혼 whom the member is following.
* Following Count : 1people
* Followed by : 랩퍼투혼, 탑돌이 ... now follwing this member.
* Followed Count : 2people

< 빌립보서 4장 13절>
내가 주 안에서 크게 기뻐함은 너희가 나를 생각하던 것이 이제 다시 싹이 남이니 너희가 또한 이를 위하여 생각은 하였으나 기회가 없었느니라 ! 내가 궁핍하므로 말하는 것이 아니니라! 어떠한 형편에든지 나는 자족하기를 배웠노니 나는 비천에 처할 줄도 알고 풍부에 처할 줄도 알아 모든 일 곧 배부름과 배고픔과 풍부와 궁핍에도 처할 줄 아는 일체의 비결을 배웠노라! 내게 능력 주시는 자 안에서 내가 모든 것을 할 수 있느니라 !

* Document Count : 17511
* Comment Count : 82
* Document Count : 36
* Document Count : 115
* Comment Count : 123
* Document Count : 2
* Comment Count : 2
* Document Count : 1
* Comment Count : -1

CMS

  • List
  • Down
  • Up
  • Write
  • Search

XE코어 XE 템플릿 문법의 이해

부운영자 부운영자
66 0 0

XE Template Syntax

템플릿(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와 좀더 가까워 질 수 있다...^^

부운영자 부운영자
93 Lv. 785830/795240P

< 빌립보서 4장 13절>
내가 주 안에서 크게 기뻐함은 너희가 나를 생각하던 것이 이제 다시 싹이 남이니 너희가 또한 이를 위하여 생각은 하였으나 기회가 없었느니라 ! 내가 궁핍하므로 말하는 것이 아니니라! 어떠한 형편에든지 나는 자족하기를 배웠노니 나는 비천에 처할 줄도 알고 풍부에 처할 줄도 알아 모든 일 곧 배부름과 배고픔과 풍부와 궁핍에도 처할 줄 아는 일체의 비결을 배웠노라! 내게 능력 주시는 자 안에서 내가 모든 것을 할 수 있느니라 !

ReportShareScrap

Comment 0

Comment Write
WYSIWYG

Report

"님의 댓글"

Are you sure you want to report this comment?

Comment Delete

"님의 댓글"

I want to Are you sure you want to delete?

Share

Permalink
  • Module Admin Controller for Delete 모듈 삭제와 컨트롤러(Controller) 모듈(mid)의 삭제는 모듈의 고유 식별 번호($module_srl)을 확인하고 module 테이블에서 해당 식별 번호를 삭제하는 것으로 끝난다. 여기에서...
  • Module Admin Controller for Insert/Update 모듈 입력/수정과 컨트롤러(Controller) 예제로 만들고 있는 example 모듈에서 새로운 모듈(mid)을 추가하고 수정할 수 있는 액션과 그에 따른 진행 과정을 그린 설계도이...
  • 모듈 확장과 모델(Model) 관리자를 위한 백 엔드 뷰(View)가 실행되면 관리자-인덱스로 설정했던 dispExampleAdminList 액션이 작동하고 그 진행과정을 설명한 그림이다. 또한 앞으로 만들게 될 관리자 목록 보기를 ...
  • Front and back ends 프론트 엔드(front-end)와 백 엔드(back-end)는, 사용자가 접근하는 영역을 말하는데 이때 사용자는 사람이 아닌 프로그램이 될 수도 있다. 예를 들어 컴퓨터 OS의 그래픽 파일 관리자는 컴퓨터...
  • MVC 구조의 이해
    부운영자 Views 68 20.08.13.14:45
    Model-View-Controller XE Core는 모델-뷰-컨트롤러(Model-View-Controller) 개발 패턴에 기반한다. 이것을 줄여서 MVC 구조라고 말한다. 소프트웨어 공학에서 프로그램의 설계는 건축(architecture)과 같다. 시스템...
  • 폼(form)과 DB
    부운영자 Views 139 20.08.13.14:41
    Form & DB XE 모듈을 이해하기 위한 기초 과정으로 폼(form)의 동작 방식을 살펴보자. 모듈은 결론적으로 폼과 DB의 관계이다. 모듈은 자신이 관리하는 테이블을 한두개 이상 가지고 있고 이것을 다루기 위해 폼을 사...
  • XE의 URL 규칙
    부운영자 Views 94 20.08.13.14:40
    URLs on XE XE에서 생성한 URL 은 깔끔하고 검색엔진에서 색인되기 좋은 구조이다. XE는 일반적인 쿼리스트링 기반의 URL이 아니라 세그먼트 기반의 URL을 사용한다. 쿼리스트링(Query string) URL이란, 다음과 같이 ...
  • 모듈의 기본 이해
    부운영자 Views 26 20.08.13.14:37
    The Story of XE Modules XE코어의 모듈 이야기... 1. 백엔드 어드민(Admin) 뷰(View) 구현을 위한 example 모듈 만들기 2. 프론트 엔드 뷰(View) 구현을 위한 BOOK 모듈 만들기 3. v1.5 룰셋(ruleset)과 BOOKMARK 모...
  • XE 모듈
    부운영자 Views 19 20.08.13.14:35
    The Story of XE Modules XE코어의 모듈 이야기... 1. 백엔드 어드민(Admin) 뷰(View) 구현을 위한 example 모듈 만들기 2. 프론트 엔드 뷰(View) 구현을 위한 BOOK 모듈 만들기 3. v1.5 룰셋(ruleset)과 BOOKMARK 모...
  • 반복문 loop
    부운영자 Views 45 20.08.13.00:44
    XE Template Syntax 반복문 loop 주어진 조건에 따라 필요한 내용을 반복해서 출력해야 할 때 반복문(루프/loop)을 사용한다. 1. 반복문의 이해 반복문은 컴퓨터가 만들어지면서 가장 먼저 시도된 증조 할아버지뻘 되...
  • 조건문 IF
    부운영자 Views 38 20.08.13.00:42
    XE Template Syntax 주어진 조건에 따라 필요한 내용을 문맥에 알맞게 출력하거나 배제할 때 조건문을 사용한다. 1. IF 문 IF 조건문은 PHP의 IF 조건문과 동일하고 "if, elseif, else, end"와 "조건식"으로 이루어져...
  • 파일 포함 include
    부운영자 Views 64 20.08.13.00:41
    XE Template Syntax XE 템플릿 스킨의 HTML 문서 안으로 외부 파일을 불러와 포함시키기 위한 문법이다. 파일 포함 문법에서는 불러 들이고자 하는 외부 파일의 경로 설정을 상대 경로로 표시한다. 즉 HTML 문서의 자...
  • 기본 문법 default
    부운영자 Views 81 20.08.13.00:40
    XE Template Syntax 1. 변수 PHP에서 변수를 다루는 것과 동일한 방법으로 XE 템플릿 안에서 변수를 정의하고 출력할 수 있다. 변수를 나타내는 문자열 앞에는 달러($) 기호를 붙여 사용하며 변수명은 대소문자를 구...
  • XE 템플릿 문법의 이해
    XE Template Syntax 템플릿(template)이란 붕어빵을 만드는 틀로 비유된다. 같은 모양, 같은 크기의 객체(object)를 만들기 쉽다. 프로그래밍 언어에서 템플릿 구문은 초등학교 시절의 플라스틱 모형자를 생각하면 이...
  • logged_info
    부운영자 Views 118 20.08.13.00:37
    $logged_info XE에 접근하면 XE는 항상 방문자의 로그인 여부를 우선 먼저 확인하게 된다. 이때 사용하는 변수가 $is_logged 와 $logged_info 이다. Context.class.php 파일 137라인을 참고해 보면 member 모듈의 mem...
  • getUrl()
    부운영자 Views 157 20.08.13.00:34
    getUrl() XE 레이아웃에 많이 쓰이는 getUrl() 함수이다. "getUrl()은 현재 요청된 RequestURI에 주어진 인자의 값으로 변형하여 url을 리턴한다."고 설명되어 있다. 또한 인자는 (key, value)... 의 형식으로 주어져...
  • Context.class.php
    부운영자 Views 97 20.08.13.00:30
    요청 인자(request arguments), 환경 변수(environment variables)와 같은 모든 컨텍스트(Context)를 관리 Context::methodname()로 호출할 수도 있고 정적 객체로도 호출할 수 있는 사용하기 쉬운 이중 방식 구조를 ...
  • Object.class.php
    부운영자 Views 68 20.08.13.00:29
    XE 모듈 사이의 객체 인스턴스를 전달하는 기본 클래스(데이터를 주고 받기 위한 클래스) 모든 모듈은 객체(Object)를 상속한다. 객체(Object)의 error, message, variables 를 이용하여 통신을 하게 된다 Object 함...
  • 함수라이브러리 func.inc.php
    clone($object) iconv($in_charset, $out_charset, $str) &getModule($module_name, $type = 'view', $kind = '') &getController($module_name) &getAdminController($module_name) &getView($module_name) &getMobi...
  • 환경설정 config.inc.php
    XE의 버전 및 개발자용 디버깅 설정이 저장된 파일 XE가 기본적으로 사용하는 함수라이브러리 func.inc.php 파일과 클래스(class)파일을 시작페이지 index.php 파일로 가져간다 define('ZBXE_VERSION', '1.4.5.7'); X...