hover

table-hover

출 처 : https://getbootstrap.kr/docs/5.1/content/tables/#%ED%98%B8%EB%B2%84%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%ED%96%89

<table class="table  table-hover text-center" style="table-layout: fixed;">

게시물 위에 마우스를 올리면 회색으로 확인이 가능합니다.

<style>
  .tr {
    cursor: pointer;
  }
</style>

게시물 위에 마우스를 올리면 손가락 모양으로 바꿉니다.

JS

  // 글 보기
  const trs = document.querySelectorAll(".tr")
  trs.forEach((box) => {
    box.addEventListener("click", () => {
      location.href = './board_view.php?bcode=' + params['bcode'] + '&idx=' + box.dataset.idx
    })
  })

게시글 보기

Board Class - view()

  // 글 보기
  public function view($idx)
  {
    $sql = "SELECT * FROM board WHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $params = [":idx" => $idx];
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $stmt->execute($params);
    return $stmt->fetch();
  }

조회수

Board Class - hitINC()

  // 글 조회수 +1
  public function hitINC($idx)
  {
    $sql = "UPDATE board SET hit=hit+1 WHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $params = [":idx" => $idx];
    $stmt->execute($params);
  }

결과

Board_view.php - Main

<?php

include "inc/common.php"; // 세션
include "inc/dbconfig.php";
include "inc/board.php"; // 게시판 클래스
include "inc/lib.php"; // 페에지네이션

$bcode = isset($_GET["bcode"]) && $_GET["bcode"] != "" ? $_GET["bcode"] : "";
$idx = isset($_GET['idx']) && $_GET['idx'] != "" && is_numeric($_GET['idx']) ? $_GET['idx'] : "";

if ($bcode == "") {
  die('
  <script>
  alert("게시판 코드가 누락되었습니다.")
  history.back()
  </script>');
}
if ($idx == "") {
  die('
  <script>
  alert("게시물 번호가 누락되었습니다.")
  history.back()
  </script>');
}

// 게시판 목록 불러오기
include "inc/boardmanage.php";
$boardm = new BoardManage($db);
$boardArr = $boardm->list();
$board_name = $boardm->getBoardName($bcode);

$board = new Board($db);
$js_array = ['js/board_view.js'];
$g_title = $board_name;
$menu_code = "board";

$boardRow = $board->hitINC($idx);
$boardRow = $board->view($idx);

include "inc_header.php";

?>

<main class="w-100 mx-auto border rounded-2 p-5">

  <h1 class="text-center"><?= $board_name; ?></h1>

  <div class="vstack w-75 mx-auto">
    <!-- 제목 -->
    <div class="p-3">
      <span class="h3 fw-bolder"><?= $boardRow['subject']; ?></span>
    </div>
    <!-- 작성자, 조회 수, 작성일시 -->
    <div class="d-flex border border-top-0 boder-bottom-1 border-start-0 border-end-0">
      <span><?= $boardRow['name']; ?></span>
      <span class="ms-5 me-auto">조회수 <?= $boardRow['hit']; ?>회</span>
      <span><?= $boardRow['create_at']; ?></span>
    </div>
    <!-- 본문 -->
    <div class="p-3"><?= $boardRow['content']; ?></div>
    <!-- 목록, 수정, 삭제 -->
    <div class="d-flex gap-2 p-3">
      <button class="btn btn-secondary me-auto">목록</button>
      <button class="btn btn-primary">수정</button>
      <button class="btn btn-danger">삭제</button>
    </div>

  </div>

</main>

<?php
include "inc_footer.php";
?>

출 처 : https://getbootstrap.kr/docs/5.1/helpers/stacks/

• vstack : 세로 레이아웃을 만들기 위해서 사용했습니다. 스택 항목은 기본적으로 full-width입니다.

마무리

다음 시간에는 게시글에 다운로드 기능을 해보겠습니다.

감사합니다.