1. PHP 홈페이지 만들기 레이아웃 구상 및 작성
오늘부터 실제로 홈페이지를 만들고 있습니다.
주소는 http://kurien.speeds.kr 이구요.
아직 진행 중이니, 계속 변할겁니다.
블로그 작성하기 전, http://kurien.speeds.kr의 상태입니다.
아직 올린 파일이 없기 때문에 오류가 나타나네요.
일단 디자인 구상부터 해보겠습니다.
디자인 구상
위의 디자인은 mspaint란 프로그램이 이용되었습니다.
그림판이라고 하죠... ㅋㅋ;
위의 이미지가 기본 레이아웃이 되도록 구성하려합니다.
물론 도중에 변할 수도 있겠지만요,
디자인을 만들 때 include 시킬 레이아웃을 먼저 만들어 둔 후 다음 부분을 제작하려고 합니다.
58. PHP 웹프로그래밍 객체 지향 12에서도 설명을 했지만, include를 하는 이유는 하지 않을 때의 문제점이 있기 때문입니다.
만약 레이아웃의 수정이 필요할 때 하나하나에 직접 HTML만을 사용해서 작성할 경우, 페이지가 몇 개 없을 경우엔 문제가 없습니다.
그런데 페이지가 몇백개 넘어가버리면 하나하나 바꾸는게 시간이 너무 오래 걸리죠.
하지만 include를 사용하면 하나의 파일만 수정을 하면 1000개의 페이지가 모두 변경되는거죠.
그래서 먼저 layout.inc라는 include용 파일을 만들었습니다.
layout.inc
<?php
// 세션을 시작합니다.
// 이후에 사용 할 로그인 용.
session_start();
// class를 이용한 객체 지향 방식
class Layout
{
public $link; // CSS 링크 태그
public $style; // 스타일 적용
public $content; // 메인 컨텐츠
public $board; //게시판 이름 지정
public $sub; // 서브 메뉴용 변수
public $title="Need Programs"; // 웹 페이지 제목
// 레이아웃을 출력
public function LayoutMain()
{
echo "<!DOCTYPE html>\n<html lang='ko'>";
echo "<head>\n<meta charset='utf-8'/>";
echo "<title>".$this->title."</title>";
echo $this->LayoutStyle(); // 스타일을 레이아웃에 추가.
echo "</head>\n<body>\n<div id='container'>";
echo $this->LayoutHeader(); // 헤더 부분을 레이아웃에 추가
echo $this->LayoutContent(); // 컨텐츠 부분을 레이아웃에 추가
echo $this->LayoutSide(); // 사이드 부분을 레이아웃에 추가
echo $this->LayoutFooter(); // 푸터 부분을 레이아웃에 추가
echo "</div></body>\n</html>";
}
// 스타일을 추가
/ public function LayoutStyle()
{
echo "<link rel='stylesheet' type='text/css' href='".$this->link."'/> ";
echo "<style>".$this->style."</style>";
}
// 헤더 부분 추가
public function LayoutHeader()
{
echo "<header>
<div id='logo'><h1><a href='./'>Need Programs</a></h1></div>
<nav></nav>
</header>
<div class='ad_1'>
// 광고 영역
</div>";
}
// 내용을 추가
public function LayoutContent()
{
echo "<section><article>".$this->content."</article>";
}
// 사이드바 추가
public function LayoutSide()
{
$this->board=explode('/', $_SERVER['PHP_SELF']);
switch($this->board[1])
{
case setup :
$this->sub="@@@@만드는 중";
break;
default :
$this->sub="@@@사이드바 제작중";
}
echo "<aside>".$this->sub."</aside></section>";
}
// 푸터 부분 추가
public function LayoutFooter()
{
echo "<footer>Copyright © Kurien. All rights reserved. Need Programs</footer>";
}
}
?>
객체 지향을 사용한 이유는 먼저 include만을 사용해서 만들려면 header 부분과 footer를 따로 하고 사이에 content 부분을 적어야하는데,
이렇게 하면 include를 적어도 2~3개를 사용해야 하고 만약 어느 페이지만 레이아웃이 조금 다를 때 수정 할 방법이 없습니다.
하지만 객체 지향으로 만들면 상속 등으로 추가하거나 수정할 수 있죠.
인덱스에 위의 layout.inc를 include 시켜서 메인 페이지를 만들어볼까요?
index.php
<?php
include_once "./layout.inc"; // 레이아웃을 include 함
$base = new Layout; // Layout class 객체를 생성
$base->style='container {margin:0 auto;} header {width:100%; height:180px; border:1px solid black;} article{float:left; width:720px; height:300px; border:1px solid black;} aside {float:right; width:260px; height:300px; border:1px solid black;} footer {clear:both;width:100%; height:50px; border:1px solid black;}';// 임시 스타일 추가
$base->content="내용이 들어가는 부분입니다."; //본문을 만듦
$base->LayoutMain(); //위의 변수들이 입력된 객체를 출력
?>
이건 index.php입니다.
아직 덜 만들었기 때문이죠, 하핫...
일단 위의 코드만으로 최소한의 내용을 출력합니다.
스타일 부분을 만들어야 하거든요.
일단 오늘은 여기까지 만들었습니다.
아마 다음 포스팅에서는 레이아웃 디자인을 할 것 같네요.
'Project' 카테고리의 다른 글
| 5. PHP 홈페이지 만들기 프로그램 메뉴 1 (6) | 2014.07.07 |
|---|---|
| 4. PHP 홈페이지 만들기 회원가입, 로그인 작성 (37) | 2014.07.04 |
| 3. PHP 홈페이지 만들기 사이드바 작성 (4) | 2014.07.02 |
| 2. PHP 홈페이지 만들기 style.css 작성 (10) | 2014.06.30 |
| PHP로 홈페이지 하나 만들어볼 생각입니다. (0) | 2014.06.28 |