게시판 - 글 수정 이미지 삭제 & DB저장

이태현·2025년 9월 16일

Web 개발

목록 보기
48/53
post-thumbnail

이미지 삭제

이미지를 수정했을 때 수정하고 나면 태그에 있는 콘텐츠에 대한 그 이미지 태그가 사라지게 됩니다. 그걸로 기존의 DB에 등록 되어있는 태그 정보를 비교해서 이미지를 갖다가 삭제된 이미지를 찾으면 되겠습니다.

Board Class

  public function extract_image($content)
  {
    preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $matches);

    $img_array = []; // 이미지 저장 배열
    foreach ($matches[1] as $key => $row) {
      $img_array[] = $row;
    }
    return $img_array;
  }

board_process.php

  $old_img_arr = $board->extract_image($row['content']);
  print_r($old_img_arr);
  exit;

현재 배열에 있는 파일 데이터값 확인하기


수정 부분에서 이미지를 하나 삭제한 후에 새로운 배열에 현재 존재하는 이미지를 담았습니다.
정규표현식 때문에 코드들이 주석 처리처럼 바뀌어서 이미지 파일로 대체하겠습니다.

삭제된 이미지 파일 찾기

  $diff_img_arr = array_diff($old_img_arr, $current_img_arr);
  print_r($diff_img_arr);
  exit;

이미지 삭제

  // 이미지 삭제
  $diff_img_arr = array_diff($old_img_arr, $current_img_arr);
  foreach ($diff_img_arr as $value) {
    unlink('../' . $value);
  }

결과 - 이미지 삭제

Before

After

DB 저장

board_edit.JS

  // 수정 - 확인
  const btn_edit_submit = document.querySelector("#btn_edit_submit")
  btn_edit_submit.addEventListener('click', () => {
    const id_subject = document.querySelector("#id_subject")

    if (id_subject.value == "") {
      alert("제목을 입력해 주세요.")
      id_subject.focus()
      return false
    }

    // 글 쓰기 내용 비어있는지 확인
    const markupStr = $('#summernote').summernote('code')
    if (markupStr == "<p><br></p>") {
      alert("내용을 입력해 주세요.")
      return false
    }

    // 게시판 Ajax
    const params = getURLParams()
    const f = new FormData()

    f.append("subject", id_subject.value) // 게시물 제목
    f.append("content", markupStr) // 게시물 내용
    f.append("bcode", params['bcode']) // 게시물 코드
    f.append("idx", params['idx']) // 게시물 번호
    f.append("mode", "edit") // 모드 : 글 수정

    const xhr = new XMLHttpRequest()
    xhr.open("post", "pg/board_process.php", true)
    xhr.send(f)

    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.response)
        if (data.result == "success") {
          alert("글 수정을 완료하였습니다.")
          location.href = "board.php?bcode=" + params["bcode"]
        } else if (data.reload = 'permission_denied') {
          alert('수정 권한이 없는 게시물입니다.')
          location.href = "board.php?bcode=" + params["bcode"]
        }
      } else {
        alert("통신 실패" + xhr.status)
      }
    }
  })

board_process.php


정규 표현식 때문에 코드들이 주석 처리 되어버려서 이미지 파일로 처리하였습니다.
참고 : https://carbon.now.sh/

Board Class- DB

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

결과

Before

After

마무리

다음 시간에는 게시글 삭제 부분을 해보겠습니다.

감사합니다.

profile
이해하고 분석하고 지배한다

0개의 댓글