1. PHP 홈페이지 만들기 레이아웃 구상 및 작성

2014.06.29 13:31
저자 : Kurien

오늘부터 실제로 홈페이지를 만들고 있습니다.


주소는 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입니다.

아직 덜 만들었기 때문이죠, 하핫... 


일단 위의 코드만으로 최소한의 내용을 출력합니다.

스타일 부분을 만들어야 하거든요.


일단 오늘은 여기까지 만들었습니다.



아마 다음 포스팅에서는 레이아웃 디자인을 할 것 같네요.

TAG ,
  1. 2014.07.21 10:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2014.07.30 14:00  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Kurien 2014.07.30 14:02 신고  댓글주소  수정/삭제

      PHP 파일은 PHP 프로그램을 통해 해석 된 다음 출력이 되어야만 웹 페이지처럼 보입니다.
      아마도 그냥 단순하게 PHP 파일을 올리신 것 같네요.
      apmsetup 프로그램이라던지 아니면 웹 호스팅을 받으셔서 올려보세요.

  3. Chung 2015.05.04 15:41 신고  댓글주소  수정/삭제  댓글쓰기

    한글로 안보여 지내요.

  4. gooster 2015.05.06 03:17 신고  댓글주소  수정/삭제  댓글쓰기

    에... include.inc 는 뭐고 다음의 layout.inc는 뭔가요 ㅜㅜ

    • Kurien 2015.05.06 22:57 신고  댓글주소  수정/삭제

      PHP를 어느정도 이해하고 있다면 알 수 있는 코드입니다.
      어렵다면 PHP 기본 문법들을 다시 보고 오시는게 좋을 것 같네요.

  5. ArialJIN 2015.06.25 06:46 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. SNS 제작을 꿈꾸고 있는 꿈나무(?) 입니다.
    html5로 해보려고 자바스크립트 부터 잘보고 있습니다.
    하다 보니 실제로 페이지를 만들거나 SNS 제작 된걸 보면 php여야 한다는 생각이 많이 드네요.
    html로 만든것들은 블로그나 홈페이지가 많은데 Guest가 글을쓰려면 php로 만드는게 쉬운거죠?
    그리고 공부해야한다면 어느것부터 공부해야하나요?
    Kurien님 블로그 내에서도 php내용이 엄청 많네요

    • Kurien 2015.06.25 14:01 신고  댓글주소  수정/삭제

      뭔가 잘못 알고 계시는것 같습니다.
      SNS를 만드려면 클라이언트 언어인 HTML, CSS, Javascript는 물론이고 서버 언어인 JSP, ASP, PHP, NodeJS 중 하나의 언어를 배워야합니다.
      게다가 각 서버에 관한 보안에 대해서도 공부 하셔야 하고, 만약 NodeJS가 아닌 언어를 사용하면 웹 소켓과 같은 것도 배워야 할겁니다.
      제 블로그에 있는 php 내용은 일부분만 추려내서 기본만 적혀있는 부분이고, 실제로 구현을 하면서 사용하는 코드는 더 어려울껍니다.

  6. JJM 2016.01.05 16:47 신고  댓글주소  수정/삭제  댓글쓰기

    와~~~ Kurien님 게시판 작성하신거 보면서 연습했는데 홈페이지도 있군요 잘배우겠습니다

    • Kurien 2016.01.07 09:14 신고  댓글주소  수정/삭제

      저도 잘 모를 때 기초만 다룬거라 수정해야할 부분은 많습니다.
      대신 어떤식으로 기능들이 작동하는지 정도는 알 수 있을꺼에요.

  7. zczc 2016.11.07 12:57 신고  댓글주소  수정/삭제  댓글쓰기

    phpmyadmin 에서 디비쿼리하는건가요 ? 아니면 에디트플러스안에다가 쿼리해서 디비생성해서 연결하는건가요?

  8. 지나가는누렁이 2018.01.11 17:07 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 kurien님!
    강좌를 잘 보고있습니다.
    한가지 문제점이 있는데 layout.inc파일의 경로를 주소창에 입력하면 다운로드가 되는데 이를 방지 할 수있는 방법이 있나요?

    • Kurien 2018.01.15 16:40 신고  댓글주소  수정/삭제

      기본상태에서의 inc 파일은 말씀하신 것처럼 주소창에 입력만 하더라도 다운로드되어 보안상 취약합니다.

      해결 방법은 파일명 자체를 layout.inc.php로 변경하여 프로그램을 작성하시거나, apache 등의 웹서버에서 php뿐 아닌 inc 파일도 php처럼 구동되도록 변경하시면 됩니다.

  9. 지나가는누렁이 2018.01.15 19:13 신고  댓글주소  수정/삭제  댓글쓰기

    답변감사합니다 참고하도록 하겠습니다 : )

  10. ㅋㅋㅋㅋㅋㅋ 2018.07.07 12:51 신고  댓글주소  수정/삭제  댓글쓰기

    이건 리눅스에서는 안되나요?

  11. 한준혁 2018.07.17 11:21 신고  댓글주소  수정/삭제  댓글쓰기

    블로거분 질문하나할게여ㅛ!
    로그인시 관리자와 일반회원을 구분하려고 하는데 어찌해야될까여

    member 테이블에 permit 이라는 속성을
    1,2 이렇게 분류해서 2는 관리자해서 어케 해보면 될꺼같은데 감이 안오네여
    코딩도 어떻게 해야될지 모르겠구요

    블로거분 관리자 페이지 사용자페이지 나누는거 해주시면안될까여!

    • Kurien 2018.07.19 15:17 신고  댓글주소  수정/삭제

      준혁님이 적어주신것처럼, member 테이블에 1, 2등의 구분할 수 있는 값을 넣고, 그에 따라 각 프로그램(게시판 등)의 권한을 설정하여 제작하는 방법도 있습니다.

      예를 들자면, 관리자만 게시판(공지사항 게시판의 경우)에 글쓰기가 가능하다면, 글 쓰기 화면과 해당 값들을 전송하여 처리하는 프로그램 부분에서 관리자인지 접근권한을 체크하는 부분을 추가해주시면 되겠죠?