댓글 - UI

    <div class="d-flex gap-2 mt-3">
      <textarea name="" id="comment_content" rows="2" class="form-control"></textarea>
      <button class="btn btn-secondary" id="btn_comment" style="width: 5em;">등록</button>
    </div>

DB

게시판 테이블 필드 추가 - 댓글 수

ALTER TABLE board ADD COLUMN comment_cnt INTEGER UNSIGNED DEFAULT 0 COMMENT '댓글수' AFTER hit;

댓글 테이블

CREATE TABLE `comment` (
idx INTEGER UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
pidx INTEGER NOT NULL,
id VARCHAR(50) DEFAULT '' COMMENT '글작성자',
content TEXT COMMENT '댓글내용',
create_at DATETIME NOT NULL,
ip VARCHAR(30)
);

댓글 테이블을 하나 만들어서 관리를 해줄겁니다.

Frontend

board_view.js

  // 댓글 버튼 클릭 시
  const btn_comment = document.querySelector("#btn_comment")
  btn_comment.addEventListener('click', () => {
    const comment_content = document.querySelector("#comment_content")

    if (comment_content.value == '') {
      alert('댓글 내용을 입력해주세요.')
      comment_content.focus()
      return false
    }

    const f = new FormData()
    f.append('pidx', params['idx'])
    f.append('content', comment_content.value)
    f.append('mode', 'input')

    const xhr = new XMLHttpRequest()
    xhr.open('post', './pg/comment_process.php', true)
    xhr.send(f)
    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.responseText)
        if (data.result == 'empty_pidx') {
          alert('게시물 번호가 누락되었습니다.')
          return false
        } else if (data.result == 'empty_content') {
          alert('댓글 내용이 누락되었습니다.')
          comment_content.focus()
          return false
        } else if (data.result == 'success') {
          location.reload()
        }
      } else if (xhr.status == 404) {
        alert('통신 실패 : ' + xhr.status)
      }
    }
  })

댓글 등록 버튼을 눌렀을 때 Ajax 통신을 해주기 위한 기본 틀을 만듭니다.

Backend

comment_process.php

<?php

include '../inc/common.php';
include '../inc/dbconfig.php';
include '../inc/member.php';
include '../inc/comment.php';

if ($ss_id == '') {
  $arr = ['result' => 'empty_ssid'];
  die(json_encode($arr));
}

$idx = (isset($_POST['idx']) && $_POST['idx'] != '') ? $_POST['idx'] : '';
$pidx = (isset($_POST['pidx']) && $_POST['pidx'] != '') ? $_POST['pidx'] : '';
$content = (isset($_POST['content']) && $_POST['content'] != '') ? $_POST['content'] : '';
$mode = (isset($_POST['mode']) && $_POST['mode'] != '') ? $_POST['mode'] : '';

// 댓글 등록
if ($mode == 'input') {
  if ($pidx == '') {
    $arr = ['result' => 'empty_pidx'];
    die(json_encode($arr));
  }
  if ($content == '') {
    $arr = ['result' => 'empty_content'];
    die(json_encode($arr));
  }

  $arr = [
    'ss_id' => $ss_id,
    'pidx' => $pidx,
    'content' => $content
  ];

  $comment = new Comment($db);
  $comment->input($arr);

  $arr = ['result' => 'success'];
  die(json_encode($arr));
}

Backend에서 처리될 부분입니다. 앞서 Ajax에서 넘겨받은 값을 가지고 댓글 등록을 해줍니다. 이후 댓글 class에 댓글등록 부분을 사용하기 위해서 배열을 하나 만들어서 해당 값을 가지고 댓글 class로 값을 보내줍니다.

Comment Class

<?php
// 댓글 관리 class
class Comment
{
  // 생성자
  private $conn;

  public function __construct($db)
  {
    $this->conn = $db;
  }

  // 댓글등록
  public function input($arr)
  {
    $sql = "INSERT INTO comment (pidx, id, content, create_at, ip) VALUES (
    :pidx, :id, :content, NOW(), :ip)";
    $stmt = $this->conn->prepare($sql);
    $params = [
      ':pidx' => $arr['pidx'],
      ':id' => $arr['ss_id'],
      ':content' => $arr['content'],
      ':ip' => $_SERVER['REMOTE_ADDR']
    ];
    $stmt->execute($params);
  }
}

댓글 관리 Class를 하나 만들어서 여기서 댓글 관련된 처리할 겁니다. 먼저 댓글 등록을 하기 위해서 insert 구문을 사용하여 파라미터로 받은 값을 담아서 댓글 table에 넣어줍니다.

결과

아직 화면에 출력하지는 않았지만, DB에는 잘 저장되고 있습니다.

마무리

다음 시간에는 댓글 목록 출력을 해보겠습니다.

감사합니다.