PHP HomePage Builder

이 강좌가 처음인 분은 이전 강좌를 먼저 참고하기 바란다.

PHP text file 핸들링
HP HomePage Builder - 홈페이지의 구조 알기

전체 디렉토리 구조는 아래와 같다. 아래 구조를 참고로 하여 디렉토리 및 파일을 생성하기 바란다.

- htdocs    : documentRoot 디렉토리
  - Config   : 메뉴설정 파일 위치
  - Content : 본문 파일 위치
     - 0_1    : 해당 분류의 본문파일
        -img   : 본문에 필요한 이미지 위치
     - 0_2    : 해당 분류의 본문파일
        -img   : 본문에 필요한 이미지 위치
  - Main_img : 메인페이지의 이미지 위치


아래 이미지는 이전 강좌에서 설명한 웹사이트의 일반적인 사용되는 구조다. 먼저 PHP로 프로그램 가능한 부분들을 각각 구현해 보자 

메뉴를 생성하기 위해서 <<Config>> 폴더를 생성하고 해당 폴더에 아래 내용을 포함하는 텍스트파일을 생성한다. - 반드시 메모장을 이용하도록 한다.

파일명 : menu.ini

회사소개,인사말씀,조직도,오시는길
제품소개,가전제품,주방제품,욕실제품
고객센터,A/S안내,불만접수,1:1게시판
커뮤니티,공지사항,자유게시판,이용후기

위 메뉴파일을 이용하여 먼저 대분류 메뉴를 생성해 보자. 이전 강좌에서 "PHP file함수는 파일 전체를 읽어서 배열(줄 단위)로 반환한다." 라고 했다.

 test.php 파일에 아래의 내용을 코딩 후 웹브라우저로 확인 해 보자

<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='150'><a href='/'>Home</a></td>
<?
	$File = file('./Config/menu.ini');
	for($i = 0; $i < sizeof($File); $i++;
	{
		$Top_menu = split(',',$File[$i]);
?>
		<td align='center'><?=$Top_menu[0]?></td>
<?
	}
?>
</tr>
</table>

실행 결과

해당 대분류 메뉴를 선택했을 때 대분류의 이름을 구하는 프로그램을 해보자 두번째 이미지의 3번부분이 되겠다.

PHP file 함수는 전체 파일을 읽어서 줄 단위로 반환한다고 했다. 그래서 반복문을 이용해서 각 줄마다 번호를 붙친다.

그 번호를 Top_menu 변수에 저장한다. 선택된 번호를 배열로 읽어서 <<,>> 기호를 기준으로 분리하면 첫번째 배열이 바로 대분류 메뉴가 된다.

그럼 직접 프로그램 해 보자. 위 소스에 몇가지를 추가 했기 때문에 위 소스와 비교하면 쉽게 알 수 있다.

<table border='1' width='100%' align='center'>
<tr>

    <td align='center' height='40' width='150'><a href='/'>Home</a></td>
<?
$File = file('./Config/menu.ini');
for($i = 0; $i < sizeof($File); $i++)
{
    $Top_menu = split(',',$File[$i]);
?>    
    <td align='center'><a href='test.php?Top_menu=<?=$i?>'><?=$Top_menu[0]?></a></td>
<?    
}
?>
</tr>
</table>
<?
for($i = 0; $i < sizeof($File); $i++)
    $Menu_item = split(',',$File[$_GET[Top_menu]]);
?>
<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='100'><?=$Menu_item[0]?></td>
</tr>
</table>

실행 결과

두번째 이미지 2번 부분처럼 대분류 메뉴를 선택 했을 때 해당 분류에 포함된 소분류 전체를 출력하는 프로그램을 해보자.

<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='150'><a href='/'>Home</a></td>
<?
$File = file('./Config/menu.ini');
for($i = 0; $i < sizeof($File); $i++)
{
    $Top_menu = split(',',$File[$i]);
?>    
    <td align='center'><a href='test.php?Top_menu=<?=$i?>'><?=$Top_menu[0]?></a></td>
<?    
}
?>
</tr>
</table>
<?
for($i = 0; $i < sizeof($File); $i++)
    $Menu_item = split(',',$File[$_GET[Top_menu]]);
?>
<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='100'><?=$Menu_item[0]?></td>
</tr>
</table>

<table border='1' width='100%' align='center'>
<?
for($i = 0; $i < sizeof($File); $i++)
{
    if($i > 0)
    {
        $Sub_menu = split(',',$File[$_GET[Top_menu]]);
?>    
<tr>
        <td align='center'><a href='?Top_menu=<?=$_GET[Top_menu]?>'><?=$Sub_menu[$i]?></a></td>
</tr>
<?    
    }
}
?>
</table>

실행 결과

이제 소분류를 선택했을 때 선택된 파일을 Include 하면 된다. 즉 [인사말씀]이라는 소분류는 회사소개에 포함되어 있다. 대분류는 0 부터 시작된다. 따라서 회사소개는 대분류가 0이 된다. 소분류는 0부터 시작되지만 0은 대분류가 되므로 0을 제외한 1부터 시작된다.

인사말씀은 고유번호는  [0 1] 이 된다. 이를 기준으로 디렉토리를 만들고 해당 디렉토리에 인사말씀에 관련된 html을 디자인 후에 파일명을 0_1.php 로 저장하면 된다.

그럼 이제껏 프로그래밍한 소스를 약간 변형시켜보자.

<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='150'><a href='/'>Home</a></td>
<?
$File = file('./menu.ini');
for($i = 0; $i < sizeof($File); $i++)
{
    $Top_menu = split(',',$File[$i]);
?>   
    <td align='center'><a href='test.php?Top_menu=<?=$i?>&Sub_menu=1'><?=$Top_menu[0]?></a></td>
<?   
}
?>
</tr>
</table>
<?
for($i = 0; $i < sizeof($File); $i++)
    $Menu_item = split(',',$File[$_GET[Top_menu]]);
?>
<table border='1' width='100%' align='center'>
<tr>
    <td align='center' height='40' width='100'><?=$Menu_item[0]?></td>
</tr>
</table>

<table border='1' width='100%' align='center'>
<?
for($i = 0; $i < sizeof($File); $i++)
{
    if($i > 0)
    {
        $Sub_menu = split(',',$File[$_GET[Top_menu]]);
?>   
<tr>
        <td align='center'><a href='?Top_menu=<?=$_GET[Top_menu]?>&Sub_menu=<?=$i?>'><?=$Sub_menu[$i]?></a></td>
</tr>
<?   
    }
}
?>
</table>
<br />
<table border='1' width='100%' align='center'>
<tr>
    <td>다음 파일을 [[ ./Content/<?=$_GET[Top_menu]?>_<?=$_GET[Sub_menu]?>/<?=$_GET[Top_menu]?>_<?=$_GET[Sub_menu]?>.php]] Incude 합니다.
    </td>
</tr>
</table>

실행 결과

위 소스를 사용하기 편리하게 함수로 만든 후 파일 이름을 Lib.php로 하여 ./Config 디렉토리에 저장한다.

<?
$File = file('./Config/menu.ini');

// 대분류를 불러오는 함수
function Page_Header()
{
    Global $File;
?>

    <table border='1' width='100%' align='center'>
    <tr>
        <td align='center' height='40' width='150'><a href='/'>Home</a></td>
<?

    for($i = 0; $i < sizeof($File); $i++)
    {
        $Top_menu = split(',',$File[$i]);
?>   
        <td align='center'><a href='test.php?Top_menu=<?=$i?>&Sub_menu=1'><?=$Top_menu[0]?></a></td>
<?   
    }
?>
    </tr>
    </table>
<?
}

// 선택 된 대분류를 출력하는 함수
function Menu_Item()
{
    Global $File;
    for($i = 0; $i < sizeof($File); $i++)
        $Menu_item = split(',',$File[$_GET[Top_menu]]);
?>
    <table border='1' width='100%' align='center'>
    <tr>
        <td align='center' height='40' width='100'><?=$Menu_item[0]?></td>
    </tr>
    </table>
<?
}

// 소분류를 출력하는 함수
function Sub_menu()
{
    Global $File;
?>

    <table border='1' width='100%' align='center'>
<?
    for($i = 0; $i < sizeof($File); $i++)
    {
        if($i > 0)
        {
            $Sub_menu = split(',',$File[$_GET[Top_menu]]);
?>   
    <tr>
            <td align='center'><a href='?Top_menu=<?=$_GET[Top_menu]?>&Sub_menu=<?=$i?>'><?=$Sub_menu[$i]?></a></td>
    </tr>
<?   
        }
    }
?>
    </table>
<?
}

// 페이지 하단에 들어갈 내용
function Page_Footer()
{
    // include ""; 혹은 내용을 직접 입력
}
?>

그리고 DocumentRoot에 index.php를  아래와 코딩 한다.

<?
include './Config/Lib.php';
?>

<table border='1' width='800'>
<tr>
	<td colspan='2'><?Top_menu();?></td>
</tr>

<?
// 대분류가 있으면 메인페이지가 아니므로 선택된 대분류명과 소분류메뉴를 출력하고 소분류 파일을 불러온다.
if(($_GET[Top_menu] != '') || ($_GET[Top_menu]))
{
?>
<tr>
	<td colspan='2' height='150'>&nbsp;</td>
</tr>

<tr height='380' valign='top'>
	<td width='150'>
<!--- 대분류를 출력하고 --->
<?Menu_Item();?>

<!--- 소분류 메뉴를 출력한다. --->
<?Sub_menu();?>
        </td>
	<td width='650' valign='top'>
<?
// 대분류 번호와 소분류 번호를 조합하여 폴더명을 구하고 파일명을 구한다음 파일을 Include 한다.
if(is_file('./Content/'.$GET[Top_menu].'_'.$_GET[Sub_menu].'/'.$_GET[Top_menu].'_'.$_GET[Sub_menu].'.php'))
	include './Content/'.$GET[Top_menu].'_'.$_GET[Sub_menu].'/'.$_GET[Top_menu].'_'.$_GET[Sub_menu].'/'.$_GET[Top_menu].'_'.$_GET[Sub_menu].'.php';
?>
	</td>
</tr>

<?
}
else
{
// 대분류가 없으면 현재 페이지는 메인페이지다.
?>
<tr>
	<td colspan='2' height='200'>&nbsp;</td>
</tr>

<tr>
	<td height='330'>&nbsp;</td>
</tr>
<?
}
?>
<tr>
	<td colspan='2'><?footer();?></td>
</tr>
</table>

디자인 변경은 index.php을 원하는 형태로 디자인 한다. index.php 디자인에 필요한 이미지파일은 Main_img 디렉토리에 두면된다.

각 소분류에 필요한 내용이 들어갈 파일명은 대분류코드 + _ + 소분류 코드가 된다. 즉 인사말씀의 코드는 0_1 이므로 0_1 디렉토리를 생성하고 0_1.php 파일에 인사말씀을 디자인하면 된다. 필요한 이미지 역시 다른 페이지들과 중복되지 않도록 0_1 디렉토리 아래 img 디렉토리에 저장하면 된다.

만약 분류들이 변경되더라도 전체 파일을 디자인 할 필요없이 menu.ini 파일 하나만 수정하면 된다.