written: Jan 28 2002
last modified: Sep 20 2006
last modified: Sep 20 2006
화면 분활 실험(공유 영역 분리)
앞장 "템플릿 사용에 따른 이점"에서도 잠시 언급하였듯이 웹사이트 전체에 걸쳐 공통적으로 쓰이는 부분(상단메뉴, 하단 저작권 표시, 좌측 메뉴 등)을 별도의 템플릿으로 분리하게 되면 여러 페이지에서 이러한 부분을 공유하여 이용할 수 있습니다. 이와같이 공유하는 구역에 대한 것은 템플릿을 이용하여 공유하게 되면 웹사이트 전체의 코드양을 상당수 줄일 수 있을 것입니다. 이러한 예를 들어보지요.
< 공유영역을 가지고 있는 웹페이지 구성 >
템플릿 파일 작성
위와 같은 페이지를 구성하기 위해 상단부분(top.htm), 하단부분(bottom.htm), 좌측메뉴(left.htm), 본문 부분(center.htm) 및 이 모든 부분을 묶어주는 부분(all.htm)에 해당하는 템플릿을 보면 아래와 같습니다.
레이아웃용 템플릿 파일 all.htm
[code html;gutter:false]
<!-- all.htm -->
<HTML>
<HEAD>
<TITLE>{TITLE}</TITLE>
</HEAD>
<BODY topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<CENTER>
<TABLE width=460 border="0" cellpadding="0" cellspacing="0">
<TR bgcolor=white align="center">
<TD valign=bottom>
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=bottom bgcolor=#999999>
{TOP}
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=top>
<TABLE cellpadding=0 cellspacing=0 border="0" width=460>
<TR>
<TD align=right valign=top width=20% bgcolor=#dddddd>
{LEFT}
</TD>
<TD align="center" valign=top width=80% bgcolor=yellow>
{CENTER}
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=top bgcolor=#999999>
{BOTTOM}
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
[/code]
화면 상단 부분 템플릿 파일 top.htm
[code html;gutter:false]
<!-- top.htm -->
<!-- Begin Table top -->
<B>핍클래스홈(phpCLASS HOME)</B>
<!-- End Table top -->
[/code]
화면 하단 부분 템플릿 파일 bottom.htm
[code html;gutter:false]
<!-- bottom.htm -->
<!-- Begin Table bottom -->
Web Master : Wookyung Hwang(hwooky)
<!-- End Table bottom -->
[/code]
화면 좌측 메뉴 템플릿 파일 left.htm
[code html;gutter:false]
<!-- left.htm -->
<!-- Begin Table left -->
<A href=''>메뉴#1</A>
<A href=''>메뉴#2</A>
<A href=''>메뉴#3</A>
<A href=''>메뉴#4</A>
<A href=''>메뉴#5</A>
<!-- End Table left -->
[/code]
화면 중앙 본문 템플릿 파일 center.htm
[code html;gutter:false]
<!-- center.htm -->
<!-- Begin Table center -->
{CONTENTS}
<!-- End Table center -->
[/code]
PHP 코드 작성 section.php
5개로 구성된 템플릿을 하나의 페이지로 구성하기 위한 PHP 소스는 아래와 같습니다.
[code php;gutter:false]
<?
/**
* section.php
*/
include_once('./class/template/class.hTemplate.php');
$tpl = new hTemplate('./templates');
$tpl->define(
array(
'all' => 'all.htm',
'top' => 'top.htm',
'left' => 'left.htm',
'center' => 'center.htm',
'bottom' => 'bottom.htm'
)
);
$tpl->assign(array(
'TITLE' => '화면 분활 실험',
'CONTENTS' => '서비스 내용',
));
$tpl->assign('TOP', 'top');
$tpl->assign('LEFT', 'left');
$tpl->assign('CENTER', 'center');
$tpl->assign('BOTTOM', 'bottom');
$tpl->assign('ALL', 'all');
$tpl->output('ALL');
?>
[/code]
생성된 HTML 문서
PHP 코드(section.php)에 의해 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HTML>
<HEAD>
<TITLE>화면 분활 실험</TITLE>
</HEAD>
<BODY topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<CENTER>
<TABLE width=460 border="0" cellpadding="0" cellspacing="0">
<TR bgcolor=white align="center">
<TD valign=bottom>
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=bottom bgcolor=#999999>
<!-- top.html -->
<!-- Begin Table top -->
<B>핍클래스홈(phpCLASS HOME)</B>
<!-- End Table top -->
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=top>
<TABLE cellpadding=0 cellspacing=0 border="0" width=460>
<TR>
<TD align=left valign=top width=20% bgcolor=#dddddd>
<!-- left.html -->
<!-- Begin Table left -->
<A href=''>핍클래스 커뮤니티?</A>
<A href=''>클래스 사용법</A>
<A href=''>클래스 객체 함수</A>
<A href=''>객체에 관련된 정보</A>
<A href=''>객체지향언어로서의 PHP</A>
<A href=''>추상클래스</A>
<A href=''>참조(레퍼런스)</A>
<!-- End Table left -->
</TD>
<TD align="center" valign=top width=80% bgcolor=yellow>
<!-- center.html -->
<!-- Begin Table center -->
서비스 내용
<!-- End Table center -->
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR bgcolor=white align="center">
<TD valign=top bgcolor=#999999>
<!-- bottom.html -->
<!-- Begin Table bottom -->
Web Master : Wookyung Hwang(hwooky)
<!-- End Table bottom -->
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
[/code]
화면 중앙 본문 내용만 변경하기 위한 PHP 소스
만약 5개의 템플릿 top.htm, bottom.htm, left.htm, center.htm, all.htm 중에서 center.htm 템플릿 대신에 다른 템플릿(예를 들어 center2.htm)을 사용하여 페이지 내용을 바꾸려면 아래와 같이 define() 함수 부분만 변경하면 됩니다.
[code php;gutter:false]
$tpl->define(
array(
'all' => 'all.htm',
'top' => 'top.htm',
'left' => 'left.htm',
'center' => 'center2.htm',
'bottom' => 'bottom.htm'
)
);
[/code]
'phpsource > 템플릿' 카테고리의 다른 글
| {후키템플릿}9.4.중첩 블록을 이용하기 (0) | 2006.09.20 |
|---|---|
| {후키템플릿}9.3.블록 조건처리 (0) | 2006.09.20 |
| {후키템플릿}9.1.가장 간단한 예제 (0) | 2006.09.20 |
| {후키템플릿}1.6.템플릿 클래스 구성 (0) | 2006.09.20 |
| {후키템플릿}1.5.FastTemplate->후키템플릿 (0) | 2006.09.20 |
