hTemplate – 9.2.공유영역이 분리된 템플릿

화면 분활 실험(공유 영역 분리)

앞장 “템플릿 사용에 따른 이점”에서도 잠시 언급하였듯이 웹사이트 전체에 걸쳐 공통적으로 쓰이는 부분(상단메뉴, 하단 저작권 표시, 좌측 메뉴 등)을 별도의 템플릿으로 분리하게 되면 여러 페이지에서 이러한 부분을 공유하여 이용할 수 있습니다. 이와같이 공유하는 구역에 대한 것은 템플릿을 이용하여 공유하게 되면 웹사이트 전체의 코드양을 상당수 줄일 수 있을 것입니다. 이러한 예를 들어보지요.

< 공유영역을 가지고 있는 웹페이지 구성 >

템플릿 파일 작성

위와 같은 페이지를 구성하기 위해 상단부분(top.htm), 하단부분(bottom.htm), 좌측메뉴(left.htm), 본문 부분(center.htm) 및 이 모든 부분을 묶어주는 부분(all.htm)에 해당하는 템플릿을 보면 아래와 같습니다.

레이아웃용 템플릿 파일 all.htm

화면 상단 부분 템플릿 파일 top.htm

화면 하단 부분 템플릿 파일 bottom.htm

화면 좌측 메뉴 템플릿 파일 left.htm

화면 중앙 본문 템플릿 파일 center.htm

PHP 코드 작성 section.php

5개로 구성된 템플릿을 하나의 페이지로 구성하기 위한 PHP 소스는 아래와 같습니다.

생성된 HTML 문서

PHP 코드(section.php)에 의해 생성된 HTML 문서를 보면 아래와 같습니다.

화면 중앙 본문 내용만 변경하기 위한 PHP 소스

만약 5개의 템플릿 top.htm, bottom.htm, left.htm, center.htm, all.htm 중에서 center.htm 템플릿 대신에 다른 템플릿(예를 들어 center2.htm)을 사용하여 페이지 내용을 바꾸려면 아래와 같이 define() 함수 부분만 변경하면 됩니다.

답글 남기기