웹 개발 공부 일기장 (게시판)

1. 게시판 웹 개발한 부분 작성

아직 검색 기능과 페이지 기능은 만들지 않았지만, 대충 디자인만 해놓고 나머지는 실제 구현 가능하도록 만들어 보았습니다.

화면에 사진과 같이 보여주기위한 기본 HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    require_once('views/includes/head.php');
    require_once('models/board-model.php');
    require_once('models/user-model.php');
    require_once('config/cookie.php');

    $userId = getCookie($_COOKIE);
    $user = getUser($userId);

    // 전체 게시글 리스트 가져오기
    $boardList = Board::getBoard();
    // 베스트 게시글 리스트 가져오기
    $bestBoardList = Board::getBestBoard();
    ?>
    <link rel="stylesheet" href="/static/css/board.css">
    <title>Board</title>
</head>

<body>
    <div id="search" class="container-fluid">
        <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
    <section id="main-section">
        <div id="board-list" class="list">
            <h2 style="margin: 2rem">게시판 목록</h2>
            <ul>
                <li>
                    <p class="board-title">제목</p>
                    <p class="board-view">조회수</p>
                    <p class="board-writer">작성자</p>
                </li>
                <?php foreach ($boardList as $board) { ?>
                    <hr style="margin: 0;">
                    <li>
                        <p class="board-title"><a href="/board-detail.php?boardId=<?= $board['idx'] ?>" class="link-secondary">
                                <?= $board['title'] ?>
                            </a>
                        </p>
                        <p class="board-view text-secondary">
                            <?= $board['view'] ?>
                        </p>
                        <p class="board-writer text-secondary">
                            <?= $board['writer'] ?>
                        </p>
                    </li>

                <?php } ?>
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </nav>
            </ul>
        </div>
        <div id="right-board">
            <div id="mypage" class="list">
                <div id="mypage-status">
                    <img class="smallImage" src="<?= $user['photo']?>" alt="...">
                    <div>
                        <h4><?= $user['name'] ?></h4>
                        <a href="/logout.php" class="link-secondary">로그아웃 ></a>
                    </div>
                </div>
                <hr style="margin: 0.5rem 0">
                    <button class="btn btn-dark" type="button"  onclick="location.href='/board-write.php'">글쓰기</button>
                    <button class="btn btn-dark" type="button"  onclick="location.href='/mypage.php'">마이페이지</button>
                <div>
                    
                </div>
            </div>
            <div id="best-board" class="list">
                <ul>
                    <h5>베스트 게시글</h5>
                    <?php foreach ($bestBoardList as $board) { $i++;?>
                        <hr style="margin: 0;">
                        <li>
                            <p>#<?=$i?> </p>
                            <p class="board-title"><a href="/board-detail.php?boardId=<?= $board['idx'] ?>" class="link-secondary">
                                    <?= $board['title'] ?>
                                </a>
                            </p>
                            <p class="board-view text-secondary">
                                <?= $board['view'] ?>
                            </p>
                        </li>
                    <?php } ?>
                </ul>
            </div>
        </div>
    </section>
</body>

</html>

베스트 게시글 가져오기위한 Board 모델 추가 사항

 public static function getBestBoard() {
            $db_conn = connectDb();
            $query = "select * from boards order by view desc limit 0,10 ";
            $result = mysqli_query($db_conn, $query);
            return $result;
        }

게시판에서 추가해야하는 기능

1. 검색 기능

2. 페이지 기능

2. 게시글 작성 페이지

화면과 같이 게시글 작성하기 위한 페이지 보여주기 위한 HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <?php
  require_once('views/includes/head.php');
  ?>
  <title>Board</title>
</head>

<body>
  <section>
    <h2>게시글 작성</h2>
    <hr>
    <form method="post" enctype="multipart/form-data">
      <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">제목</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" name="title" required>
      </div>
      <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">내용</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" name="content" rows="10"></textarea>
      </div>
      <div class="mb-3">
        <label for="formFile" class="form-label">첨부 파일</label>
        <input class="form-control" type="file" id="formFile" name="file">
      </div>
      <div class="end">
        <button type="submit" id="board" class="btn btn-outline-primary">작성하기</button>
      </div>
    </form>
  </section>
</body>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  require_once('board-write-func.php');
}
?>

</html>

입력 받은 게시글을 처리하는 PHP 코드

<?php
require_once('config/cookie.php');
require_once('data/database.php');
require_once('models/board-model.php');

$db_conn = connectDb();

$userId = getCookie($_COOKIE);
if (!$userId) {
  echo "<script>alert('먼저 로그인 해주세요.'); window.location.href='/login.php';</script>";
  exit;
}

// 업로드된 파일 임시저장 되는 곳
$uploaded_file_name_tmp = $_FILES['file']['tmp_name'];
// 업로드된 파일 이름
$uploaded_file_name = $_FILES['file']['name'];
// 임시저장된 파일을 우리가 원하는 곳으로 이동시킬 위치
$upload_folder = "upload/uploadfile/";
$salt = hash('md5', (string) time());

// 업로드된 파일을 각각 구별하기 위한 날짜로 이름 지정
$uploadPath = $upload_folder . $salt . $uploaded_file_name;

// 임시 저장된 파일을 원하는 곳으로 이동
move_uploaded_file($uploaded_file_name_tmp, $uploadPath);

$boardTitle = $_POST['title'];
$boardContent = $_POST['content'];

// 받은 데이터로 게시글 객체 생성 후 데이터베이스에 저장
$board = new Board($userId, $boardTitle, $boardContent, date("Y-m-d"), $uploadPath);
$board->createBoard();
header('location: board.php');

?>

3. 게시글 자세히 보기

각 게시글 클릭 시 해당 게시글 내용 확인 가능

게시글 내용을 확인할 수 있으며 클릭 시 마다 조회수 증가

해당 페이지를 구성하는 HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    require_once('views/includes/head.php');
    require_once('models/board-model.php');
    require_once('config/cookie.php');

    $userId = getCookie($_COOKIE);
    $boardIdx = $_GET['boardId'];
    $board = Board::getBoardWithIdx($boardIdx);
    if ($_GET['view']) {
        Board::viewBoard($boardIdx);
    }
    ?>
    <link rel="stylesheet" href="/static/css/board.css">
    <link rel="stylesheet" href="/static/css/board-detail.css">
    <title>Board</title>
</head>

<body>
    <main>
        <section>
            <h2>
                <?= $board['title'] ?>
            </h2>
            <hr>
            <div id="board-info">
                <p class="text-secondary">
                    &nbsp;
                    <?= $board['writer'] ?> | <?= $board['date'] ?>
                </p>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        첨부 파일
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#"><?= $board['file']?></a></li>
                    </ul>
                </div>
            </div>
            <br>
            <div>
                <pre>
<?= $board['content'] ?>
</pre>
            </div>
        </section>
    </main>
</body>

</html>

게시글 조회수 증가를 위한 Board 모델 함수 추가

    public static function viewBoard($idx) {
        $db_conn = connectDb();
        $query = "update boards set view = view + 1 where idx=$idx";
        mysqli_query($db_conn, $query);
        mysqli_close($db_conn);
    }

추가해야하는 기능

1. 첨부파일 다운로드

4. 게시글 수정

마이페이지의 게시글 정보에서 자신이 작성한 게시글 삭제 가능

원래 작성된 게시글 정보를 가져오며 파일은 새로 첨부해야하는 페이지 작성

게시글 수정 페이지를 구성하는 HTML 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <?php
  // require_once('views/includes/error-check.php');
  require_once('views/includes/head.php');
  require_once('models/board-model.php');
  $board = Board::getBoardWithIdx($_GET['boardId']);
  ?>
  <title>Board</title>
</head>

<body>
  <section>
    <h2>게시글 수정</h2>
    <hr>
    <form method="post" enctype="multipart/form-data">
      <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">제목</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" name="title"
          value="<?= $board['title'] ?>" required>
      </div>
      <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">내용</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" name="content"
          rows="10"><?= $board['content'] ?></textarea>
      </div>
      <div class="mb-3">
        <label for="formFile" class="form-label">첨부 파일</label>
        <input class="form-control" type="file" id="formFile" name="file">
      </div>
      <div class="end">
        <button type="submit" id="board" class="btn btn-outline-primary">수정하기</button>
      </div>
    </form>
  </section>
</body>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  require_once('board-edit-func.php');
}
?>

</html>

게시글 수정을 위한 PHP 코드

<?php
require_once('config/cookie.php');
require_once('data/database.php');
require_once('models/board-model.php');

$db_conn = connectDb();

$userId = getCookie($_COOKIE);
if (!$userId) {
  echo "<script>alert('먼저 로그인 해주세요.'); window.location.href='/login.php';</script>";
  exit;
}

$boardTitle = $_POST['title'];
$boardContent = $_POST['content'];
$boardIdx = $board['idx'];

// 첨부 파일이 있을 경우와 없을 경우 분리
if (is_uploaded_file($_FILES['file']['tmp_name'])) {
  $uploaded_file_name_tmp = $_FILES['file']['tmp_name'];
  $uploaded_file_name = $_FILES['file']['name'];
  $upload_folder = "upload/uploadfile/";
  $salt = hash('md5', (string) time());
  $uploadPath = $upload_folder . $salt . $uploaded_file_name;
  move_uploaded_file($uploaded_file_name_tmp, $uploadPath);
} else $uploadPath = '';

// 게시글 수정 수행
$board = new Board($userId, $boardTitle, $boardContent, null, $uploadPath);
$board->updateBoard($boardIdx);
header('location: board.php');

?>

게시글 수정을 위한 Board 모델의 함수 추가

    public function updateBoard($boardIdx) {
        // 게시글 정보 가져오기
        $title = $this->title;
        $content = $this->content;
        $uploadPath = $this->uploadPath;
        
        // 게시글 수정
        $db_conn = connectDb();
        $query = "update boards set title='$title', content='$content', file='$uploadPath' where idx=$boardIdx";
        mysqli_query($db_conn, $query);
        mysqli_close($db_conn);
    }

5. 게시글 삭제

마이페이지의 게시글 정보에서 자신이 작성한 게시글 삭제 가능

삭제 클릭 시 해당 게시글 삭제

게시글 삭제를 위한 PHP 코드

<?php 
  require_once('config/cookie.php');
  require_once('data/database.php');
  require_once('models/board-model.php');

  $db_conn = connectDb();

  $userId = getCookie($_COOKIE);
  if (!$userId) {
    echo "<script>alert('먼저 로그인 해주세요.'); window.location.href='/login.php';</script>";
    exit;
  }

  $boardIdx = $_GET['boardId'];
  Board::removeBoard($boardIdx);
  header('location: myboard.php');
  
?>

게시글 삭제를 위한 Board 모델 함수 추가

    public static function removeBoard($idx) {
        $db_conn = connectDb();
        $query = "delete from boards where idx=$idx";
        mysqli_query($db_conn, $query);
        mysqli_close($db_conn);
    }

게시판 기능 정리

1. 게시판: 게시글 리스트 확인

2. 게시글 작성

3. 게시글 수정

4. 게시글 삭제

이렇게 기본적인 게시판의 형태를 갖춘 웹을 만들어 보았습니다.

이제 게시글 검색, 게시글 정렬, 게시판 페이지, 첨부파일 다운로드 기능들을 추가하여 보다 진짜같은?? 게시판을 만들어 보겠습니다.

'웹 개발' 카테고리의 다른 글

웹 개발 공부 일기장 (0)	2024.02.01
웹 개발 공부 일기장 (마이페이지 수정) (0)	2023.12.25
웹 개발 공부 일기장 4 과제 (마이페이지) (2)	2023.11.21
웹 개발 공부 일기장 4 - 과제 (쿠키탈취 및 키로거) (0)	2023.11.19
웹 개발 공부하기 4 - 과제 (자바스크립트) (0)	2023.11.18