[책]스프링 부트 시작하기 리뷰

[책]스프링 부트 시작하기 리뷰_5

JSP·자바·코틀린

by 김일국 2019. 12. 28. 17:24

지난 포스트 [책]스프링 부트 시작하기 리뷰_4 에 이어서 작업을 하였습니다.

공통

- 스프링 부트 시작하기(2019출판) 작업환경: 이클립스+STS플러그인+그래들빌드+스프링부트2.1.1버전+스프링프레임웍5.x

- 책 소스와는 다르게 자바는 Open JDK사용: jdk1.8.0_181버전

오늘 작업 결과: 게시판 입력창에 에디터를 만들어 보았습니다.(아래)

- WebJars 사이트를 이용해서 스프링부트(자바)에서 Static 콘텐트(js, css 등) 사용하기

(아래는 Pen 웹에디터 사용 소스 찾기) URL: https://www.webjars.org/

- Jar 클래스파일을 이용해서 스프링부트(자바)에서 Static 콘텐트(js, css 등) 사용하기

(아래는 Pen 웹에디터 사용 Dependency 적용) 기술참조: http://millky.com/@origoni/post/1162

- 오늘 작업한 JPA방식(자동생성되는 스키마 테이블) 작업소스

   board_jpa_20191228.zip (Mysql / H2 DB 변경 소스 포함)
- 공통사항
   오늘 작업한 소스: 모두 스프링버전 2.x 호환됩니다.
   JPA방식: 자동 생성되는 스키마(테이블) 초기 관리자 아이디 / 암호( admin@edu.com / 1234567 )

Ps1. 앞으로 작업예정: JPA방식에서
- 클라우드 헤로쿠(Heroku) 서버에 JPA 소스(H2 DB | Mysql 설정포함)를 H2 DB 설정으로 배포예정.

Ps2. 게시판 수정 타임리프 파일(boardDetail.html) Pen에디터 추가한 내용은 아래와 같습니다.

<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
   xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
   layout:decorator="layout/base">
<body>

<th:block layout:fragment="css">
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" href="/webjars/pen/0.2.3/pen.css" />
<style type="text/css">
  #toolbar{margin-bottom:1em;position;left:20px;margin-top:5px;}
  #toolbar [class^="icon-"]:before, #toolbar [class*=" icon-"]:before{font-family:'pen'}
  #hinted{color:#1abf89;cursor:pointer;}
  #hinted.disabled{color:#666;}
  #hinted:before{content: '\MarkDown';}

  .pen-icon {padding: 0 9.3px;}
  .pen-menu {position: inherit; opacity: 0.8; border: -1px; height: 37px;}
  .pen-menu:after {display: none;}
  .pen p {font-family: Lora, 'Times New Roman', serif; font-size: 20px; color: #404040;}
  .pen h1, h2, h3, h4, h5, h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 800;
   margin-top: 20px;
   margin-bottom: 10px;
   line-height: 1.1;
  }
  .pen h1 {font-size: 36px;}
  .pen h2 {font-size: 30px;}
  .pen h3 {font-size: 24px;}
  .pen h4 {font-size: 18px;}
</style>
</th:block>

<th:block layout:fragment="script">
<script src="/webjars/pen/0.2.3/pen.js"></script>
<script src="/webjars/pen/0.2.3/markdown.js"></script>
<script th:inline="javascript">
$(document).ready(function(){
  // config
  var options = {
    toolbar : document.getElementById('custom-toolbar'),
    editor : document.querySelector('[data-toggle="pen"]')
   };
  // create editor
  var pen = window.pen = new Pen(options);
  pen.focus();
  document.querySelector('#hinted').addEventListener('click', function() {
   var pen = document.querySelector('.pen')
   if (pen.classList.contains('hinted')) {
    pen.classList.remove('hinted');
    this.classList.add('disabled');
   } else {
    pen.classList.add('hinted');
    this.classList.remove('disabled');
   }
  });
  // 페이지 떠나는 메세지 사용중지
  window.onbeforeunload = null;
  // 수정일때 에디터에 DB값 넣기
  $('#pen').html($('#contents').val());
});
</script>
</th:block>
<div layout:fragment="content">
<div class="container">
  <h2>게시글 상세 화면</h2>
     <form id="frm" name="frm" method="post">
     <table class="board_detail">
    <colgroup>
     <col width="15%"/>
     <col width="35%"/>
     <col width="15%"/>
     <col width="35%"/>
    </colgroup>
    <caption>게시글 상세내용</caption>
    <tbody>
     <tr>
      <th scope="row">글 번호</th>
      <td th:text="${board.boardIdx }"></td>
      <th scope="row">조회수</th>
      <td th:text="${board.hitCnt }"></td>
     </tr>
     <tr>
      <th scope="row">작성자</th>
      <td th:text="${board.creatorId }"></td>
      <th scope="row">작성일</th>
      
      <td th:text="${#strings.substring(board.createdDatetime,0,10)}"></td>
     </tr>
     <tr>
      <th scope="row">제목</th>
      <td colspan="3"><input type="text" id="title" name="title" th:value="${board.title }"/></td>
     </tr>
     <tr>
      <td colspan="4" class="view_text">
      
      <div id="toolbar">
       <span id="hinted" class="icon-pre disabled" title="Toggle Markdown Hints">힌트</span>
      </div>
      <div id="custom-toolbar" class="pen-menu pen-menu" style="display: block;margin:0 auto;">
        <i class="pen-icon icon-insertimage" data-action="insertimage"></i>
        <i class="pen-icon icon-blockquote" data-action="blockquote"></i>
        <i class="pen-icon icon-h1" data-action="h1"></i>
        <i class="pen-icon icon-h2" data-action="h2"></i>
        <i class="pen-icon icon-h3" data-action="h3"></i>
        <i class="pen-icon icon-p active" data-action="p"></i>
        <i class="pen-icon icon-code" data-action="code"></i>
        <i class="pen-icon icon-insertorderedlist" data-action="insertorderedlist"></i>
        <i class="pen-icon icon-insertunorderedlist" data-action="insertunorderedlist"></i>
        <i class="pen-icon icon-inserthorizontalrule" data-action="inserthorizontalrule"></i>
        <i class="pen-icon icon-indent" data-action="indent"></i>
        <i class="pen-icon icon-outdent" data-action="outdent"></i>
        <i class="pen-icon icon-bold" data-action="bold"></i>
        <i class="pen-icon icon-italic" data-action="italic"></i>
        <i class="pen-icon icon-underline" data-action="underline"></i>
        <i class="pen-icon icon-createlink" data-action="createlink"></i>
      </div>
      
       <input type="hidden" name="contents" id="contents" th:value="${board.contents }">
       
       <hr style="margin-top: 12px; border-top: 1px solid #999;">
       <div data-toggle="pen" id="pen" style="min-height: 200px;"></div>
       <hr>
      </td>
     </tr>
    </tbody>
   </table>
   <input type="hidden" id="boardIdx" name="boardIdx" th:value="${board.boardIdx }">
  </form>

  <div class="file_list">
   <a th:each="list : ${board.fileList}" th:href="@{/board/downloadBoardFile.do(idx=${list.idx}, boardIdx=${list.boardIdx})}" th:text="|${list.originalFileName} (${#numbers.formatDecimal(list.fileSize == null ? 0 : (list.fileSize)/1024, 0, 0)} kb)|"></a>
  </div>

  <a href="#this" id="list" class="btn">목록으로</a>
  <a href="#this" id="edit" class="btn">수정하기</a>
  <a href="#this" id="delete" class="btn">삭제하기</a>
</div>

<script type="text/javascript">
  $(document).ready(function(){
   $("#list").on("click", function(){
    location.href = "/board/openBoardList.do";
   });

   $("#edit").on("click", function(){
    var frm = $("#frm")[0];
    $('#contents').val($('#pen').html());
    //alert($('#contents').val());
    frm.action = "/board/updateBoard.do";
    frm.submit();
   });

   $("#delete").on("click", function(){
    var frm = $("#frm")[0];
    frm.action = "/board/deleteBoard.do";
    frm.submit();
   });
  });
</script>
</div>
</body>
</html>

board_jpa_20191228.zip

0.19MB

'JSP·자바·코틀린' 카테고리의 다른 글

1/2_전자정부표준프레임웍 활용 (0)	2020.01.03
[책]스프링 부트 시작하기 리뷰_6 (0)	2019.12.29
[책]스프링 부트 시작하기 리뷰_4 (0)	2019.12.27
[책]스프링 부트 시작하기 리뷰_3 (0)	2019.12.26
[책]스프링 부트 시작하기 리뷰_2 (0)	2019.12.25