눈사람의 해킹공부

[PHP/MYSQL] 회원 전용 게시판 만들기 1. 메인페이지 및 헤더(푸터)파일 본문

웹

[PHP/MYSQL] 회원 전용 게시판 만들기 1. 메인페이지 및 헤더(푸터)파일

5n0wman 2023. 11. 20. 20:17

 
이 포스트에서는 우분투 아파치 서버에서 PHP, MYSQL을 이용한 회원 전용 게시판 생성에 대해 다룹니다.
이 포스트는 아빠는개발자님의 게시판만들기 강좌를 참고하였습니다.
 
이 포스트는 이전 포스트들과 무관합니다. 새로이 만들어보겠습니다!
 
해당 포스트에서 다룰 게시판의 파일들은 이렇게 관리됩니다.
/서버 루트 : index.php, view.php, write.php, write_ok.php, delete.php
/루트/inc : dbcon.php, footer.php, header.php
/루트/members : login.php, login_ok.php, logout.php, signup.php, signup_ok.php
 
그렇다면 회원 전용 게시판의 로직을 살펴보겠습니다.
 
0. dbcon.php, header.php, footer.php를 활용하여 각 php파일에서 필요한 세션시작, DB연결 등을 사용합니다.
1. 메인 페이지(index)는 게시판 페이지로 간략한 사용자 정보와 글들을 최신순으로 정렬하여 출력해줍니다.
 1-1. 게시글의 제목을 클릭하면 게시물을 확인할 수 있는 페이지(view.php)로 넘어갑니다. 
 1-2. 게시물 확인 페이지(view.php)에서 글을 수정 및 삭제할 수 있습니다.
2. 로그인 되지 않은 상태에서 메인페이지에 접속하면 우측 하단에 로그인(login.php), 회원가입(signup.php) 버튼이 출력됩니다.
 2-1. 로그인 버튼을 누르면 로그인 페이지(login.php)로 이동하고, 해당 페이지는 로그인용 폼을 출력하고 로그인 버튼을 누르면 로그인 처리용 페이지(login_ok.php)로 이동하고 데이터베이스에 저장한 계정 정보를 대조 후 성공 시 다시 메인페이지(index.php)로 복귀합니다.
 2-2. 회원 가입 버튼을 누르면 회원 가입 페이지(signup.php)로 이동하고, 해당 페이지는 회원가입용 폼을 출력하고 회원가입을 누르면 회원가입 처리용 페이지(sign_up.php)에서 미리 생성해둔 데이터베이스에 회원 정보를 저장하고 다시 메인페이지(index.php)로 이동합니다.
3. 이제 메인페이지에 로그아웃(logout.php) 버튼과 글 생성(write.php) 버튼이 출력되고, 글 작성, 수정, 삭제의 권한이 부여됩니다.
 
 위와 같은 로직을 구현해보겠습니다.
데이터베이스(TEST)는 두 개의 테이블을 사용하며 각각의 테이블 구성은 아래와 같습니다.
혹시 모를 한자 등 특수문자의 입력에도 인코딩이 깨지지 않게 하기 위해 데이터베이스의 데이터 정렬 방식은 두 테이블 모두 utf8mb4_0900_ai_ci로 설정하였습니다.

board 테이블
members 테이블

 
먼저 각 php파일에 들어갈 헤더파일들을 살펴보겠습니다.

dbcon.php

<?php
error_reporting( E_ALL );
ini_set( "display_errors", 1 ); //에러코드 출력

$hostname="localhost";
$dbuserid="test";
$dbpasswd="pass";
$dbname="TEST";

$mysqli = new mysqli($hostname, $dbuserid, $dbpasswd, $dbname);
if ($mysqli->connect_errno) {
    die('Connect Error: '.$mysqli->connect_error);
}

?>

1. 데이터베이스 접속

  • 데이터베이스 접속에 필요한 정보들을 세션 변수로 생성해 만들어둔 데이터베이스(TEST)에 접속하는 코드를 포함합니다. 

header.php

<?php session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";
?>

<!doctype html>
<html lang="en">
  <head>
    <!-- 메타 태그 정의 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>게시판</title>
  </head>
  <body>
  <div class="col-md-8" style="margin:auto;padding:20px;">

 
header.php는 웹 페이지의 기본 구조를 설정하고, 사용자의 세션 관리, 데이터베이스 연결, 그리고 Bootstrap을 통한 스타일링을 준비합니다. 각 부분의 역할은 다음과 같습니다.

1. 세션 시작 및 데이터베이스 연결 파일 포함

<?php session_start(); include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php"; ?>
  • session_start(): 웹 페이지에서 세션을 시작합니다. 이를 통해 사용자의 세션 정보를 추적하고 저장할 수 있습니다.
  • include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";: 서버의 루트 디렉토리에 있는 dbcon.php 파일을 포함합니다.

2. HTML 문서 시작 및 메타 태그

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" 
content="width=device-width, initial-scale=1">
  • <!doctype html>: HTML5 문서 유형 선언입니다.
  • <html lang="en">: 문서가 영어로 작성되었음을 나타냅니다.
  • <meta> 태그: 문자 인코딩을 UTF-8로 설정하고, 뷰포트를 기기의 화면 너비에 맞추도록 합니다. 이는 모바일 친화적인 웹 페이지를 만드는 데 중요합니다.

3. Bootstrap CSS 및 JavaScript

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  • 여기서는 Bootstrap 5.1.3 버전의 CSS와 JavaScript를 CDN 링크를 통해 포함합니다. Bootstrap은 웹 페이지 디자인을 쉽고 일관되게 만들어주는 프레임워크입니다.

4. 본문 시작 및 컨테이너 설정

<body> 
<div class="col-md-8" style="margin:auto;padding:20px;">
  • <body> 태그는 웹 페이지의 본문을 시작합니다.
  • <div class="col-md-8" style="margin:auto;padding:20px;">: Bootstrap의 그리드 시스템을 사용하여 페이지 내용을 중앙에 배치합니다. col-md-8 클래스는 중간 크기의 화면에서 8칸의 너비를 차지하도록 설정합니다. 스타일은 자동 마진과 패딩을 추가하여 레이아웃을 조정합니다. 

footer.php

</div>
</body>
</html>

1.  HTML 문서 종료

  • </div>, </body>, </html> 태그는 문서의 끝부분을 정의합니다. 전체 HTML 문서의 구조적인 완성을 의미합니다.

 이와 같이 헤더파일을 따로 만들어 사용하면, 동일한 헤더 구조를 여러 페이지에 걸쳐 재사용할 수 있습니다. 이는 효율적이며, 시간을 절약하고 일관성을 유지하는 데 도움이 됩니다. 또한, 웹 사이트의 헤더 부분을 수정해야 할 때, 별도의 헤더 파일을 사용하면 해당 파일만 수정하면 됩니다. 이는 전체 사이트에 걸쳐 일관된 변경을 쉽게 적용할 수 있게 해줍니다.
 
 이러한 이유로, 웹 개발에서는 헤더, 푸터, 사이드바 등을 별도의 파일로 분리하여 관리하는 것이 일반적인 관행입니다. 이는 웹 사이트의 확장성, 관리 용이성 및 전반적인 코드 품질을 향상시키는 데 중요한 역할을 합니다.
 
다음으로 메인페이지입니다.

index.php

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

$result = $mysqli->query("select * from board where status=1 order by bid desc") or die("query error => ".$mysqli->error);
while($rs = $result->fetch_object()){
    $rsc[]=$rs;
}
?>

<h1>눈사람의 게시판</h1>

<?php
if (isset($_SESSION['UID'])) {
    $user_id = $_SESSION['UID']; // 세션에서 사용자 ID 검색
    $user_name = $_SESSION['UNAME']; // 세션에서 사용자 이름 검색
    echo "<p><strong>$user_name</strong> ($user_id)님 환영합니다!</p>";
}else{
    echo "<p>회원 전용 게시판입니다. 로그인을 해주세요.</p>";
}
?>

<table class="table">
<thead>
<tr>
    <th scope="col">번호</th>
    <th scope="col">글쓴이</th>
    <th scope="col">제목</th>
    <th scope="col">등록일</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($rsc as $r){
?>
    <tr>
        <th scope="row"><?php echo $i++;?></th>
        <td><?php echo $r->userid?></td>
        <td><a href="/view.php?bid=<?php echo $r->bid;?>"><?php echo $r->subject?></a></td>
        <td><?php echo $r->regdate?></td>
    </tr>
<?php }?>
</tbody>
</table>
<p style="text-align:right;">

<?php
if(isset($_SESSION['UID'])){ //세션값이 있는지 여부를 확인해서 로그인 했는지를 체크
    ?>
    <a href="write.php"><button type="button" class="btn btn-primary">등록</button></a>
    <a href="/members/logout.php"><button type="button" class="btn btn-primary">로그아웃</button></a>
        <?php
}else{ 
?>
    <a href="/members/login.php"><button type="button" class="btn btn-primary">로그인</button></a>
    <a href="/members/signup.php"><button type="button" class="btn btn-primary">회원가입</button></a>
        <?php
}
?>
</p>

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>

 
index.php는 동적인 게시판 기능을 제공합니다. 각 부분의 역할을 자세히 설명하겠습니다.

1. 헤더 파일 포함

include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";
  • 서버의 루트 디렉토리에 있는 header.php 파일을 포함합니다. 

2. 데이터베이스 쿼리

$result = $mysqli->query("select * from board where status=1 order by bid desc")
  • MySQL 데이터베이스의 board 테이블에서 status가 1인 레코드를 bid 기준으로 내림차순으로 조회합니다.

3. 결과 처리

while($rs = $result->fetch_object()){ $rsc[] = $rs; }
  • 쿼리 결과를 객체로 변환하여 $rsc 배열에 저장합니다.

4. 사용자 세션 처리

if (isset($_SESSION['UID'])) { // 사용자 정보 출력 } 
else { // 로그인 요청 메시지 출력 }
  • 사용자가 로그인 상태인지 확인하고, 로그인한 경우 사용자 이름과 ID를 표시합니다. 로그인하지 않은 경우 로그인 요청 메시지를 표시합니다.

5. 게시판 테이블

<table class="table">...</table>
  • HTML 테이블을 사용하여 데이터베이스에서 가져온 게시글 데이터를 표시합니다.

6. 로그인/회원가입 버튼

if(isset($_SESSION['UID'])){ // 로그인 상태일 때 버튼 표시 } 
else { // 로그인 상태가 아닐 때 버튼 표시 }
  • 사용자의 로그인 상태에 따라 다른 버튼(로그아웃/등록 또는 로그인/회원가입)을 표시합니다.

전체적으로, index.php는 사용자가 로그인한 상태를 확인하고, 데이터베이스에서 게시글 목록을 조회하여 웹 페이지에 표시하는 기능을 수행합니다.
 
브라우저에서 index.php를 열어보면 아래와 같이 뜨면 성공!(게시글은 필자와 달리 아무것도 뜨지 않을 것이다).

 
다음 포스트에서는 로그인, 회원가입 로직을 살펴보겠습니다.

'웹' 카테고리의 다른 글

[PHP/MYSQL] 회원 전용 게시판 만들기 3. 게시글 보기, 작성, 수정, 삭제  (0) 2023.11.21
[PHP/MYSQL] 회원 전용 게시판 만들기 2. 회원가입 및 로그인  (2) 2023.11.20
[PHP] 회원가입, 로그인 페이지 만들기(DB활용)  (0) 2023.11.09
[PHP] 로그인 페이지 구현과 CSS를 이용한 디자인  (0) 2023.10.30
웹 서버(Web Server)와 WAS(Web Application Server)  (0) 2023.10.26
'웹' Related Articles more