게시판 만들기 #5 (게시글 수정하기)

게시판 만들기

 

게시글 수정하기

 

read_post.js

            const updateBtn = document.createElement('a');
            updateBtn.textContent = '수정';
            updateBtn.setAttribute(
              'onclick',
              `updatePost(${categoryId}, '${post.title}', ${JSON.stringify(
                post.content
              )}, ${post.post_id})`
            );

 

 

update_post.js

function updatePost(categoryId, postTitleText, postContentText, postId) {
  const postContainer = document.querySelector('.post-container');
  const write = document.querySelector('.post-title');
  const categriesAll = document.querySelectorAll('.category');
  const postContent = document.querySelector('.post-content');

  // 태그 생성
  const form = document.createElement('form');
  form.classList.add('write-form');

  const titleWrap = document.createElement('div');
  titleWrap.classList.add('title-wrap');

  const categorySelect = document.createElement('select');
  categorySelect.setAttribute('name', 'categoryId');
  categorySelect.classList.add('category-select');

  categriesAll.forEach((categoryTag) => {
    const option = document.createElement('option');
    option.value = categoryTag.getAttribute('data-category-id');
    option.textContent = categoryTag.innerHTML;
    categorySelect.appendChild(option);
  });

  categorySelect.value = categoryId;

  const titleInput = document.createElement('input');
  titleInput.setAttribute('type', 'text');
  titleInput.setAttribute('name', 'title');
  titleInput.setAttribute('placeholder', '제목을 입력해 주세요.');
  titleInput.setAttribute('maxlenght', '30');
  titleInput.value = postTitleText;
  titleInput.classList.add('title-input');

  titleWrap.appendChild(categorySelect);
  titleWrap.appendChild(titleInput);

  const contentInput = document.createElement('textarea');
  contentInput.setAttribute('name', 'content');
  contentInput.setAttribute('placeholder', '내용을 입력해 주세요.');
  contentInput.textContent = postContentText.replaceAll('<br />', '');
  contentInput.classList.add('content-input');

  const submitBtn = document.createElement('button');
  submitBtn.setAttribute('onclick', `updateSubmit(event, ${postId})`);
  submitBtn.classList.add('submit-btn');
  submitBtn.textContent = '수정하기';

  // form에 태그 추가
  form.appendChild(titleWrap);
  form.appendChild(contentInput);
  form.appendChild(submitBtn);

  // 실제 화면에 추가
  postContent.innerHTML = '';
  postContent.appendChild(form);
  write.innerHTML = '게시글 수정';
  postContainer.classList.add('on');
}

수정버튼을 누르면 updatePost() 함수가 실행되고, 게시글 작성과 똑같이 폼을 만들고 폼에 전달받은 값을 입력해 줍니다.

수정하기 버튼을 누르면 updateSubmit() 함수를 실행합니다.

 

update_submit.js

function updateSubmit(e, postId) {
  const form = document.querySelector('.write-form');

  e.preventDefault();
  if (confirm('게시글을 수정하시겠습니까?')) {
    const url = '/forum/db/update_post.php';
    const formData = new FormData(form);
    formData.append('post_id', postId);
    fetch(url, {
      method: 'POST',
      body: formData,
    })
      // .then((res) => res.text())
      // .then((res) => console.log(res));
      .then((res) => res.json())
      .then((res) => {
        if (res.token) {
          if (res.result) {
            closePost();
          }
        } else {
          window.location.href = '/logout.php';
        }
      });
  }
}

confirm을 이용해 수정확인창을 띄운 뒤에 확인을 누르면 update_post.php에 폼데이터를 post 요청으로 보냅니다.

결과가 성공적일 때 clasePost()로 컨테이너를 종료합니다.

 

update_post.php

<?php
require_once("../../jwt_auth.php");
require_once("../../mysql.php");

// echo "test";
if($token = Jwt_auth::auth()) {
    // echo "test";
    if(isset($_POST["categoryId"])) {
        // echo "test";
        $category_id = $_POST["categoryId"];
        $title = $_POST["title"];
        $content = str_replace("\r", "", $_POST["content"]);
        $content = nl2br($content);
        $content = addslashes($content);
        $post_id = $_POST["post_id"];
        // echo $content;

        if($title != "" && $content != "") {
            // echo "test";
            $user_id = $token->sub;
            $id = runSQL("select id from users where user_id='$user_id'")->fetch_array()['id'];
            $writer_id = runSQL("select writer_id from posts where post_id=$post_id")->fetch_array()['writer_id'];

            if ($id == $writer_id) {
                // echo "test";

                $sql = "update posts set category_id=$category_id, title='$title', content='$content' where post_id=$post_id";
                runSQL($sql);
                echo json_encode(["result"=> true, "token" => true]);
            }
    
        }else {
            echo json_encode(["result"=> false]);
        }

    }
}else {
    echo json_encode(["result"=> false, "token" => false]);
}

       $content = addslashes($content);

입력받은 게시글 내용중 sql문에 문제가 될만한 ', ", \ 와 같은 문자들의 앞에 \를 추가해서 이스케이프 문자로 만듭니다.

 

                $sql = "update posts set category_id=$category_id, title='$title', content='$content' where post_id=$post_id";
                runSQL($sql);
                echo json_encode(["result"=> true, "token" => true]);

update문으로 수정을 하고, 결과를 응답합니다.

---

마무리