게시판 Edit

• 모달 창을 이용하여 수정 버튼과 등록을 같이 사용하였습니다.

게시판 수정하기

게시판 등록하기

게시판 수정 - Ajax

// 확인버튼
  const btn_board_create = document.querySelector("#btn_board_create")

  btn_board_create.addEventListener("click", () => {
    const board_title = document.querySelector("#board_title")
    const board_type = document.querySelector("#board_type")

    if (board_title.value == "") {
      alert("게시판 이름을 입력해 주세요.")
      board_title.focus()
      return false
    }
    btn_board_create.disabled = true

    const board_mode = document.querySelector("#board_mode")

    const xhr = new XMLHttpRequest()
    const f = new FormData()

    f.append("board_title", board_title.value)
    f.append("board_type", board_type.value)
    f.append("mode", board_mode.value)
    f.append("idx", document.querySelector("#board_idx").value)

    xhr.open("post", "pg/board_process.php", true)
    xhr.send(f)

    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.responseText)
        // console.log(data)
        if (data.result == "mode_empty") {
          alert("Mode 값이 누락되었습니다.")
          btn_board_create.disabled = false
          return false
        } else if (data.result == "title_empty") {
          alert("게시판 명이 누락되었습니다.")
          btn_board_create.disabled = false
          board_title.focus()
          return false
        } else if (data.result == "btype_empty") {
          alert("게시판 타입이 누락되었습니다.")
          btn_board_create.disabled = false
          return false
        } else if (data.result == "success") {
          alert("게시판이 생성되었습니다.")
          btn_board_create.disabled = false
          location.reload()
        } else if (data.result == "edit_success") {
          alert("게시판이 수정되었습니다.")
          btn_board_create.disabled = false
          location.reload()
        }
      } else {
        alert("통신 실패 " + xhr.status)
      }
    }
  })

  // 수정버튼
  const btn_mem_edits = document.querySelectorAll(".btn_mem_edit")

  btn_mem_edits.forEach((box) => {
    box.addEventListener("click", () => {
      const board_mode = document.querySelector("#board_mode")
      board_mode.value = "edit"

      document.querySelector("#modalTitle").textContent = "게시판 수정"

      const idx = box.dataset.idx
      const board_idx = document.querySelector("#board_idx")
      board_idx.value = idx

      const f = new FormData()

      f.append("idx", idx)
      f.append("mode", "getInfo")

      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.responseText)

          if (data.result == "idx_empty") {
            alert("idx값이 누락되었습닌다.")
            return false
          } else if (data.result == "success") {
            document.querySelector("#board_title").value = data.list.name
            document.querySelector("#board_type").value = data.list.btype
          }
        } else {
          alert("통신 실패" + xhr.status)
        }
      }
    })
  })

게시판 수정 - Backend

// 게시판 글 수정
else if ($mode == "edit") {
  if ($idx == "") {
    $arr = ["result" => "idx_empty"];
    die(json_encode($arr));
  }

  if ($board_title == "") {
    $arr = ["result" => "title_empty"];
    die(json_encode($arr));
  }

  if ($board_type == "") {
    $arr = ["result" => "btype_empty"];
    die(json_encode($arr));
  }

  // 게시판 수정
  $arr = [
    "name" => $board_title,
    "btype" => $board_type,
    "idx" => $idx
  ];

  $board->update($arr);
  $arr = ["result" => "edit_success"];
  die(json_encode($arr));
}

// 게시판 정보 가져오기
else if ($mode == "getInfo") {
  if ($idx == "") {
    $arr = ["result" => "idx_empty"];
    die(json_encode($arr));
  }
  $row = $board->getInfo($idx);

  $arr = ["result" => "success", "list" => $row];
  die(json_encode($arr));
}

게시판 수정 - DB

  // 게시판 업데이트
  public function update($arr)
  {
    $sql = "UPDATE board_manage SET name=:name, btype=:btype wHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $stmt->bindParam(":name", $arr["name"]);
    $stmt->bindParam(":btype", $arr["btype"]);
    $stmt->bindParam(":idx", $arr["idx"]);

    $stmt->execute();
  }

  // 게시판 정보 불러오기
  public function getInfo($idx)
  {
    $sql = "SELECT * FROM board_manage WHERE idx=:idx";
    $stmt = $this->conn->prepare($sql);
    $stmt->bindParam(":idx", $idx);
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $stmt->execute();

    return $stmt->fetch();
  }

결과

Before

After

마무리

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

감사합니다.