웹 페이지를 만들 때는 보통 하나의 파일로 하나의 페이지를 구성하기보다는, 페이지의 각 부분 ( 메인메뉴,서브메뉴,바디,하단카피라이트 등)을 각각 파일로 만들어 하나의 파일에 삽입하여 구성하는 방법을 많이 사용합니다.
예를 들면 아래와 같습니다.
예를 들면 아래와 같습니다.
위의 그림에서는 각 부분의 html 파일들이 모여 "layout.html" 파일을 이루고 있습니다.
layout.html 파일에 각 html 파일들을 직접 삽입하여 페이지를 구성할 수도 있으나, Spac 프레임웍은 위와 같은 레이아웃 구성을 쉽게 할 수 있도록 레이아웃 도구를 제공합니다.
이제 Spac 의 레이아웃 도구를 이용하여 위와 같은 레이아웃을 구성해 보도록 하겠습니다.
먼저 레이아웃을 구성할 설정파일을 열어 아래와 같이 입력합니다. (만약 설정파일이 존재하지 않는다면 만들어줍니다)
레이아웃 설정파일은 "Spac/controller/Layout.ini" 파일입니다.
* Spac/controller/Layout.ini
;layout files config
[main]
layout = "/layout.html"
menu = "/menu.html"
left = "/left.html"
body = "/body.html"
foot = "/foot.html"
[main]
layout = "/layout.html"
menu = "/menu.html"
left = "/left.html"
body = "/body.html"
foot = "/foot.html"
- 첫번째줄(녹색글씨) 는 주석문이므로 무시됩니다.
- 두번째줄은 레이아웃의 대표 이름입니다.
이 설정파일에는 여러개의 레이아웃을 구성할 수 있으므로 각 레이아웃마다 구별할 수 있는 이름을 지정해줍니다.
이번 예제에서는 "main" 으로 하겠습니다.
- 세번째줄은 전체레이아웃의 부모가 되는 파일을 지정합니다.
이 부모파일은 반드시 레이아웃파일 구성중 가장 먼저 와야 합니다.
- 네번째부터는 부모 레이아웃의 각 부분에 들어갈 조각파일들을 지정합니다.
레이아웃파일의 지정은 이름 = "값" 의 형식을 가집니다.
레이아웃 설정이 끝나면 그 내용대로 각각의 파일들을 만들어줍니다.
설정파일의 순서대로 파일들을 만들어보겠습니다.
* Spac/view/layout.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spac Layout Page...</title>
</head>
<body>
<table border="1">
<tr>
<td width="800" colspan="2" height="70">#menu#</td>
</tr>
<tr>
<td width="150" height="500">#left#</td>
<td width="650">#body#</td>
</tr>
<tr height="50">
<td width="800" colspan="2">#foot#</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spac Layout Page...</title>
</head>
<body>
<table border="1">
<tr>
<td width="800" colspan="2" height="70">#menu#</td>
</tr>
<tr>
<td width="150" height="500">#left#</td>
<td width="650">#body#</td>
</tr>
<tr height="50">
<td width="800" colspan="2">#foot#</td>
</tr>
</table>
</body>
</html>
레이아웃에 들어가는 내용은 전체적인 레이아웃 배치와 각 부분에 들어갈 html 파일로 구성됩니다.
html 로 삽입해야 하는 부분에는 "Layout.ini" 에 지정한 html 파일의 이름을 지정해주고 앞뒤로 "#" 을 이용해 닫습니다.(파랑색 글씨)
이제 각 html 파일의 내용을 만들어 보겠습니다.
* Spac/view/menu.html
이제 각 html 파일의 내용을 만들어 보겠습니다.
* Spac/view/menu.html
이곳은 메뉴 영역입니다.
* Spac/view/left.html
이곳은 왼쪽 서브 메뉴 영역입니다.
* Spac/view/body.html
이곳은 바디 부분입니다.
<br/>
<?=$this->msg?>
<br/>
이곳이 주요 내용을 출력할 부분입니다.
<br/>
<?=$this->msg?>
<br/>
이곳이 주요 내용을 출력할 부분입니다.
* Spac/view/foot.html
이곳은 하단 카피라이트 부분입니다.
레이아웃을 위한 설정과 파일을 모두 만들었습니다.
이제 모델클래스를 만들어 지금까지 만든 레이아웃페이지를 출력해보겠습니다.
* Spac/model/LayoutTest.Class.php
<?php
class LayoutTest extends Controller {
var $msg = '안녕하세요';
function LayoutTest() {}
function execute() {
$this->setLayout("main");
$this->result_uri = "body.html";
$this->targetLayoutName = "body";
$this->dispatcher();
}
}
?>
class LayoutTest extends Controller {
var $msg = '안녕하세요';
function LayoutTest() {}
function execute() {
$this->setLayout("main");
$this->result_uri = "body.html";
$this->targetLayoutName = "body";
$this->dispatcher();
}
}
?>
1. "setLayout" 메소드를 이용하여 "Layout.ini" 에 정의된 레이아웃 중 "main" 이라는 이름의 레이아웃을 적용합니다.
2. "result_uri" 에 주요한 출력파일을 설정합니다. (여기서는 body.html 가 주요한 내용이 있는 파일입니다.)
3. "targetLayoutName" 에는 위 2번 항목이 위치할 레이아웃내의 이름영역을 지정해줍니다. (기본값 "body")
4. "dispatcher" 메소드를 이용해 위 레이아웃을 화면에 배치/출력합니다.
브라우저에서 호출해봅니다.
실제 적용된 예제는 아래 링크에서 확인하실 수 있습니다.
