댓글 수정

UI

    <div class="mt-3">
      <table class="table">
        <colgroup>
          <col width=50%>
          <col width=10%>
          <col width=20%>
        </colgroup>
        <?php foreach ($commentRs as $comRow) { ?>
          <tr>
            <td><span><?= nl2br($comRow['content']); ?></span>
              <?php
              if ($comRow['id'] == $ss_id) {
                echo '<button class="btn btn-info btn-sm ms-2 btn_comment_edit" data-comment-idx="' . $comRow['idx'] . '">수정</button>';
                echo '<button class="btn btn-danger btn-sm ms-2 btn_comment_delete" data-comment-idx="' . $comRow['idx'] . '">삭제</button>';
              } ?></td>
            <td><?= $comRow['id']; ?></td>
            <td><?= $comRow['create_at']; ?></td>
          </tr>
        <?php } ?>
      </table>
    </div>

수정 버튼에 data-comment-idx값을 넣어서 어떤 댓글을 삭제할 것인지 판단합니다.

board_view.js

    const f = new FormData()
    f.append('pidx', params['idx']) // 게시물 번호
    f.append('content', comment_content.value)
    f.append('idx', btn_comment.dataset.commentIdx)
    if (btn_comment.dataset.commentIdx > 0) {
      f.append('mode', 'edit')
    } else {
      f.append('mode', 'input')
    }

  // 댓글 수정
  const btn_comment_edits = document.querySelectorAll(".btn_comment_edit")
  btn_comment_edits.forEach((box) => {
    box.addEventListener('click', () => {
      const comment_content = document.querySelector("#comment_content")
      comment_content.value = box.parentNode.childNodes[0].textContent
      comment_content.style.backgroundColor = 'Khaki'
      comment_content.focus()

      btn_comment.dataset.commentIdx = box.dataset.commentIdx
      btn_comment.textContent = '수정'
    })
  })

수정 버튼을 눌렀을 때 등록 버튼이 수정으로 바뀌고 해당 댓글의 내용이 입력 칸으로 들어갑니다. 그리고 배경색을 넣어서 확실하게 포커스가 이동되었다는 걸 알려줍니다.

기존에는 등록 버튼을 누르면 바로 댓글 수정이 이루어졌는데 댓글 수정 기능이 생기면서 수정 버튼을 누르면 댓글 입력 칸에 댓글 내용이 들어가면서 등록 버튼 btn_comment.dataset.commentIdx에 해당 댓글 번호 값이 들어가면서 mode 값이 edit으로 바뀌고 그 값을 가지고 댓글 수정으로 Ajax 통신을 하게 됩니다.

comment_process.php

// 댓글 소유권 확인 ( 인가자만 수정, 삭제가 가능하게 처리 )
if ($mode == 'edit' || $mode == 'delete') {
  if ($idx == '') {
    $arr = ['result' => 'empty_idx'];
    die(json_encode($arr));
  }
  $commentRow = $comment->getInfo($idx);

  if ($commentRow['id'] != $ss_id) {
    $arr = ['result' => 'access_denied'];
    die(json_encode($arr));
  }
}

else if ($mode == 'edit') {

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

  $arr = [
    'ss_id' => $ss_id,
    'idx' => $idx,
    'content' => $content
  ];
  $comment->update($arr);

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

넘겨받은 값을 가지고 배열에 담아서 Comment Class에 있는 update()함수에 값을 담아서 넘겨줍니다. 그런데 해당 수정을 다른 사람이 악의적으로 사용할 수도 있기 때문에 앞서 사용자 정보를 가져와서 수정하는 사람이 해당 댓글의 소유자가 아니라면 수정할 수 없게 합니다.

Comment Class - DB

댓글 수정

  // 댓글 수정
  public function update($arr)
  {
    $sql = "UPDATE comment SET content=:content WHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $params = [
      ':content' => $arr['content'],
      ':idx' => $arr['idx']
    ];
    $stmt->execute($params);
  }

넘겨받은 값을 가지고 해당 게시물에 댓글을 수정 합니다.

댓글 정보 가져오기

  // 댓글 정보 가져오기
  public function getInfo($idx)
  {
    $sql = "SELECT * FROM comment WHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $params = [':idx' => $idx];
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $stmt->execute($params);

    return $stmt->fetch();
  }

현재 댓글 수정자가 본인의 댓글이 맞는지 확인하기 위해서 사용자 정보를 가져옵니다.

댓글 수 확인

      <tr class="tr" data-idx="<?= $boardRow['idx']; ?>">
        <th><?= $number; ?></th>
        <td style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: start;">
          <?php echo $boardRow["subject"];
          if ($boardRow['comment_cnt'] > 0) {
            echo '<span class="badge text-bg-success ms-2">' . $boardRow['comment_cnt'] . '</span>';
          }
          ?>
        </td>
        <td><?= $boardRow["name"]; ?></td>
        <td><?= $boardRow["create_at"]; ?></td>
        <td><?= $boardRow["hit"]; ?></td>
      </tr>

게시물에 댓글이 얼마나 있는지 확인하기 위함입니다.

마무리

초창기에 제가 올렸던 웹 개발을 하면서 만들어 볼 것들을 적어놨는데요.
얼추 마무리된 거 같아서 웹 개발 부분은 여기서 마무리를 지으려고 합니다.
물론 못한 부분도 있기는 한데 최소한의 기능을 수행할 수 있는 웹페이지를 만들었다고 생각합니다.
어느덧 하나하나 만들다 보니 여기까지 만들 수 있었던 거 같습니다.
솔직히 처음에 아무것도 모르는 상태에서 저렇게 해야 할 것들을 올려놨지만
막상 내가 할 수 있을까? 라는 생각이 더 컸던 거 같습니다.
웹 개발을 하면서도 정말 많이 틀리고 오류도 나고 늘 새로운 걸 배우다 보니 너무 힘들었습니다.
물론 클론 코딩으로 하다 보니 어느 정도 길잡이 역할은 확실히 도움이 되었습니다.
이런 강의 영상조차 없었다면 아마 더 힘들고 고되고 오래 걸렸을 거고 이만큼 기능들을 수행하지 못했을 거 같습니다.
하지만 공부하면 할수록 더더욱 만들어보고 싶었고 해내고 싶었습니다. 그렇게 포기하지 않고 아득바득했기 때문에 지금과 같은 결과물을 낼 수 있었다고 생각합니다.
사실 원래는 좀 더 일찍 끝내려고 했습니다. 왜냐하면 처음에는 잘 몰랐을 때 간단하게만 만들고 바로 모의해킹을 공부하기 위해서 웹 개발을 시작했던 겁니다.
여러 웹 해킹기법을 사용하기 위해서 시작했던 웹 개발이 개발하면서 점점 더 욕심이 생기더라고요.
배우는 재미가 정말 좋았습니다. 그러다 보니 웹 해킹도 잊은 채로 웹 개발에만 온전히 신경을 쓰고 더 많은 시간을 보냈습니다.
하지만 이제는 웹 개발도 어느 정도 개발 리스트에 있는 기능들을 만들어도 봤으니 웹 해킹 공부도 시작해야 할 때인 거 같아서 시원섭섭하지만 여기서 마무리를 짓겠습니다.

항상 마무리 부분에 제가 쓰는 말이 있습니다.

오늘은 거기에 좀 더 보태서 마지막 말 전하고 마무리하겠습니다.

사실 누가 보는지도 모르고 누가 볼까라는 생각도 했지만

그냥 저도 개발자인 척하면서 누군가가 지나가다 도움이 되지 않을까 하는 마음으로 여태 해왔습니다.

그렇게 했더니 마치 제가 정말 뭐라도 된 거처럼 더욱 열정이 생기고 더더욱 흥미를 느끼면서 공부했던 거 같네요.

포기하지 않고 제가 하고 싶었던 화이트해커가 되어서 선한 영향력 펼칠 수 있는 그런 사람이 되겠습니다.

부족하지만 그동안 봐주셔서 정말 감사합니다.