3. PHP 홈페이지 만들기 사이드바 작성

Project

2014. 7. 2. 14:56

저자 : Kurien

위의 이미지는 전 포스팅에서까지의 페이지입니다.

일단 메뉴는 만들어 뒀었지만, 눌러도 연결된 페이지가 없었습니다.

오늘은 이 부분을 수정하는데 메인 페이지는 데이터베이스를 사용해서 연결해야하기 때문에 사이드바 부터 만들겠습니다.

주소는 http://kurien.speeds.kr 입니다.

한번 들어가서 구경해보세요~

일단 notice ,programs, board란 폴더를 만들고 거기에 index.php 파일을 넣어서 메뉴로 연결될 페이지를 만들었습니다.

그리고 각 페이지들의 사이드 바 메뉴를 쉽게 만들 수 있게 layout.inc 수정 위주로 했습니다.

layout.inc

<?php

// 세션을 시작합니다.

// 이후에 사용 할 로그인 용.

session_start();

// class를 이용한 객체 지향 방식

class Layout

{

public $title="Need Programs"; // 웹 페이지 제목

private $menu = array('Board'=>'board', 'Programs'=>'programs', 'Notice'=>'notice');

private $pmenu = array('전체'=>'?tn=all', '압축'=>'?tn=press');

private $bmenu = array('전체'=>'?tn=all', '자유게시판'=>'?tn=press');

public $link; // CSS 링크 태그

public $style; // 스타일 적용

public $content; // 메인 컨텐츠

public $board; //게시판 이름 지정

private $sub; // 서브 메뉴용 변수

private $login; // 로그인이나 로그아웃을 출력

// 레이아웃을 출력

public function LayoutMain()

{

echo $this->ThisBoard(); // 현재 게시판의 이름을 확인

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 ThisBoard()

{

$this->board = explode('/', $_SERVER['PHP_SELF']);

}

// 스타일을 추가

public function LayoutStyle()

{

echo "<link rel='stylesheet' type='text/css' href='".$this->link."'/> ";

echo "<style>".$this->style."</style>";

}

// 헤더 부분 추가

public function LayoutHeader()

{

$this->LayoutLogin();

echo "<header>

<div id='logo'><h1><a href='/'>Need Programs</a></h1></div>

$this->LayoutMenu($this->menu, 0); // $menu 배열을 이용해서 메뉴 부분을 호출

echo " </nav>

<nav id='login'>".$this->login."</nav>

</div>

// 광고 영역

</div>

</header>";

}

public function LayoutMenu($menu, $side) // 배열과 <li> 을 이용해서 메뉴 부분을 호출

{

while (list($key, $value) = each($menu))

{

$this->ThisMenu($key, $value, $side);

}

public function ThisMenu($key, $value ,$side) //받아온 값으로 메뉴를 출력함

{

if($side=='1')

{

if(strpos($_SERVER['REQUEST_URI'], $value)==false)

{

$thismenu = $thismenu."<li><a href='./".$value."'>".$key."</a></li>";

} else

{

$thismenu = $thismenu."<li><b style='border-bottom:4px solid #90bbff;'>".$key."</b></li>";

}

} else

{

if(strpos($_SERVER['PHP_SELF'], $value)==false)

{

$thismenu = $thismenu."<li><a href='/".$value."'>".$key."</a></li>";

} else

{

$thismenu = $thismenu."<li><b style='border-bottom:4px solid #90bbff;'>".$key."</b></li>";

}

echo $thismenu;

}

public function LayoutLogin()

{

if($_SESSION['id']=="")

{

if(strpos($_SERVER['PHP_SELF'], "login.php"))

{

$this->login="<b style='border-bottom:3px solid #90bbff;'>Login</b>";

} else

{

$this->login="<a href='/login.php'>Login</a>";

}

} else

{

$this->login="<a href='/Logout.php'>Logout</a>";

}

// 내용을 추가

public function LayoutContent()

{

echo "<section><article>".$this->content."</article>";

}

// 사이드바 추가

public function SideMenu()

{

$this->board=explode('/', $_SERVER['PHP_SELF']);

switch($this->board[1])

{

case notice :

echo "<h3 style='margin: 5px 0 10px 0;text-align:center;'><a href='".$_SERVER['PHP_SELF']."'>공지사항</a></h3>";

break;

case programs :

echo "<h3 style='margin: 5px 0 10px 0;text-align:center;'><a href='".$_SERVER['PHP_SELF']."'>프로그램</a></h3>";

$this->LayoutMenu($this->pmenu, 1);

break;

case board :

echo "<h3 style='margin: 5px 0 10px 0;text-align:center;'><a href='".$_SERVER['PHP_SELF']."'>게시판</a></h3>";

$this->LayoutMenu($this->bmenu, 1);

break;

default :

echo "@@@사이드바 제작중";

}

public function LayoutSide()

{

echo "<aside>";

$this->SideMenu();

echo "</aside></section>";

}

// 푸터 부분 추가

public function LayoutFooter()

{

}

웹 자체에서는 많이 변한게 없지만, 내부적으로는 조금 더 쉽게 사용하기 위해서 변화가 많네요.

제가 수정했지만서도, 어디 어디 수정한건지 정확히 모르겠네요 ㅠㅠ

체크 안된 부분이 있을 수도 있으니 이해 부탁드립니다^^;

이번에도 차근차근 설명하겠습니다.

먼저 private로 된 메뉴 부분입니다.

배열 $menu, $pmenu, $bmenu가 있는데 각각 메인 메뉴와 프로그램의 서브메뉴, 게시판의 서브메뉴입니다.

사이드바에 출력될 키 값과 밸류 값입니다.

나중가서 하나하나 추가하기 힘들 것 같아서 저렇게 했습니다.

ThisBoard()는 현재 게시판이 어떤 게시판인지 확인하기 위해 만들었구요.

$this->LayoutMenu($this->menu, 0); 메뉴를 만듭니다.

$menu 배열에 있는 키와 값을 이용해서 만드는데 사이드바에 만드는게 아니므로 0, 사이드바에 만든다면 1을 적습니다.

원래는 하나하나 적었었는데, 바꿨네요.

이 아래 있는 public function LayoutMenu($menu, $side)는 배열에서 각각의 키와 값을 가져오고, 사이드가 있는지 없는지 확인합니다.

위에 있던 메뉴를 이 함수를 가지고 만듭니다.

그리고 이 함수 내에도 또 하나의 함수가 존재하는데, 여기서 배열을 $key와 $value로 나눠서 ThisMenu($key, $value ,$side)로 넘겨줍니다.

그럼 여기서는 각각의 변수를 가지고 <li><a href='".$value."'>".$key."</a></li>와 같은 방식으로 바꿔서 출력합니다.

만약 이 링크의 페이지가 현재 페이지라면 링크를 없앤 후 <li><b>$key</b></li>만 출력합니다.

LayoutLogin() 함수에서 Login 부분도 다른 메뉴들처럼 현재 페이지가 login.php라면 링크 부분을 없애줍니다.

마지막으로 사이드 부분 SideMenu()와 LayoutSide() 부분은 사이드 바의 메뉴를 만들기 위해서 만들었습니다.

SideMenu()에서 <h3> 태그를 이용해서 카테고리 메뉴를 만들고, 그 아래 또 한번 LayoutMenu() 함수를 사용해서 메뉴를 만듭니다.

그리고 LayoutSide()에서 echo $this->SideMenu();를 이용해 출력했습니다.

어우... 점점 길어지네요 ㅠ

style.css

/* body all */

body {margin:0;color:#6E6E7F;background:#e9eaed;}

a:link,

a:visited {color:#90bbff;text-decoration:none;font-weight:bolder;}

a:hover {color:#B1B1CC;}

/* container start */

div#container {margin:0 auto;}

/* header start */

header {width:94%; background:#fff;margin:1% 2% 0 2%; padding:1%; border-radius:10px;box-shadow:0px 0px 5px #aac;}

header h1 {margin:0;padding:5px;}

header h1 > a:link,

header h1 > a:visited {color:#8E8E9F;text-decoration:none;}

header h1 > a:hover {color:#000;}

div#logo {float:left;width:260px;}

div#navset {float:right;}

nav#menu {text-align:right;width:300px;}

nav#menu > li {float:right;list-style:none;margin-left:10px}

nav#login {clear:both;padding-top:5px;text-align:right;width:300px;}

div.ad_1 {clear:both;background:#fff;text-align:center;padding:10px 0 5px 0;background:#e9eaed;border-radius:10px;}

/* header end */

/* section start */

/* article start */

article {box-shadow:0px 0px 5px #aac;float:left; width:68%; min-height:600px; background:#fff;margin:10px 0px 10px 2%;padding:1%;border-radius:10px;}

/* article end */

/* aside start */

aside {box-shadow:0px 0px 5px #aac;float:right; width:23%; min-height:400px;background:#fff;margin:10px 2% 10px 1%;padding:1%;border-radius:10px;}

aside li {list-style:none; margin: 5px;}

/* aside end */

/* section end */

/* footer start */

footer {box-shadow:0px 0px 5px #aac;clear:both;width:94%;background:#fff;margin:0 2% 10px 2%;padding:1%;border-radius:10px;}

/* footer end */

/* container end */

style.css 부분은 크게 수정한 곳은 없습니다.

각각의 박스에 box-shadow를 줬구요.

logo 부분의 크기가 살짝 부족해서 width를 260을 줬습니다.

programs/index.php

<?php

require '../layout.inc';

$base = new Layout;

$base->link = '../style.css';

$base->content = 'Programs';

$base->LayoutMain();

notice, programs, board 폴더에는 각각 index.php가 있는데요.

세개의 index.php 모두 위와 비슷한 상태입니다.

그리고 login.php와 logout.php도 비슷한 상황이구요.

현재는 단순히 페이지만 만들어놨구요.

메인의 index.php와 다른점은 다른 파일을 링크 시킬 때 ../처럼 .을 두개를 사용합니다.

오늘은 여기까지 만들었네요.

사이드바 부분은 배열에 있는 부분을 수정하게 되면 사이드바 메뉴를 추가할 수 있습니다.

이해 안되는 부분이 있으시면 댓글에 남겨주세요^^

저작자표시 비영리 변경금지

'Project' 카테고리의 다른 글

5. PHP 홈페이지 만들기 프로그램 메뉴 1 (6)	2014.07.07
4. PHP 홈페이지 만들기 회원가입, 로그인 작성 (37)	2014.07.04
2. PHP 홈페이지 만들기 style.css 작성 (10)	2014.06.30
1. PHP 홈페이지 만들기 레이아웃 구상 및 작성 (22)	2014.06.29
PHP로 홈페이지 하나 만들어볼 생각입니다. (0)	2014.06.28

Kurien's Blog