게시판 글쓰기 전체 코드

<?php

include "inc/common.php";
include "inc/dbconfig.php";

$bcode = isset($_GET["bcode"]) && $_GET["bcode"] != "" ? $_GET["bcode"] : "";

if ($bcode == "") {
  die('
  <script>
  alert("게시판 코드가 누락되었습니다.")
  history.back()
  </script>');
}
// 게시판 목록 불러오기
include "inc/boardmanage.php";

$boardm = new BoardManage($db);
$boardArr = $boardm->list();
$board_name = $boardm->getBoardName($bcode);

$js_array = ['js/board_write.js'];
$g_title = "게시판";

include "inc_header.php";
?>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>

<main class="w-75 mx-auto border rounded-2 p-5">
  <h1 class="text-center">게시판 글쓰기</h1>

  <div class="mb-2">
    <input type="text" name="subject" id="id_subject" class="form-control" placeholder="제목을 입력해 주세요." autocomplete="off">
  </div>
  <div id="summernote"></div>
  <div class="mt-2 d-flex gap-2 justify-content-end">
    <button class="btn btn-primary" id="btn_write_submit">확인</button>
    <button class="btn btn-secondary" id="btn_board_list">목록</button>
  </div>

</main>

<script>
  $('#summernote').summernote({
    placeholder: '내용을 입력해 주세요.',
    tabsize: 2,
    height: 400,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
    ]
  });
</script>

<?php
include "inc_footer.php";
?>

Summernote

출처 https://summernote.org/getting-started/#without-bootstrap-lite

게시판 글쓰기 - JS

// URL 쿼리 스트링 가져오기
function getURLParams() {
  const params = {}

  window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function (str, key, value) {
      params[key] = value
    })
  return params
}

document.addEventListener("DOMContentLoaded", () => {
  // 게시판 목록으로 이동하기
  const btn_board_list = document.querySelector("#btn_board_list")

  btn_board_list.addEventListener("click", () => {
    const params = getURLParams()

    location.href = "board.php?bcode=" + params["bcode"]
  })

  // 게시물 작성 후 확인버튼 클릭시
  document.querySelector("#btn_write_submit")

  btn_write_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 bcode = params["bcode"]
    const f = new FormData()

    f.append("subject", id_subject.value) // 게시물 제목
    f.append("content", markupStr) // 게시물 내용
    f.append("bcode", bcode) // 게시판 코드
    f.append("mode", "input") // 모드 : 글 등록

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

    xhr.onload = () => {
      if (xhr.status == 200) {
        alert("통신 성공")
      } else {
        alert("통신 실패" + xhr.status)
      }
    }
  })
})

결과

제목이 비었을 때

내용이 비었을 때

제목, 내용이 비어있지 않을 때

전송 데이터

마무리

다음 시간에는 Summernote Backend 부분 기능을 해보겠습니다.

감사합니다.