게시판 등록

2022. 5. 15. 10:46

[ enroll.html ]

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/fragments/head :: home-customer"></head>
<body class="g-sidenav-show bg-gray-200">
    <nav th:replace="/fragments/nav :: nav-customer" class="navbar navbar-expand-lg navbar-light bg-light" ></nav>
    
    <main class="main-content mt-0">
        <div class="card-header">
            <h4 class="font-weight-bolder">새 게시판 입력</h4>
            <p class="mb-0">새로운 게시물을 작성하세요</p>
        </div>
        <form role="form" th:action="@{/recipe/board/enroll}" method="post" th:object="${board}">
            <div class="">
                <div class="form-group col-md-6">
                    <label for="inputEmail4">제목</label>
                    <input type="text" class="form-control" id="inputEmail4" style="display: block;" th:field="*{title}" required />
                </div>  
                
                <div class="form-group col-md-6">
                    <div for="inputEmail4" class="input-group input-group-dynamic">
                    <textarea th:field="*{content}" class="form-control" rows="5" placeholder="내용을 적어주세요." spellcheck="false" required ></textarea>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label class="form-label">작가</label>
                    <input type="text" class="form-control" th:field="*{writer}" required />
                </div>
                <div class="text-center">
                    <button type="button" class="btn-lg btn-outline-warning">게시하기</button>
                </div>
            </div>    
        </form>
      </main>

    <footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>

form 태그에 method="post"
button 태그에 type="submit"
해야 post매핑 적용됨.
기본 of 기본적이지만 실수하기 쉬운 부분.

새 게시판 등록하는 페이지

레시피 글 등록 post 매핑

@PostMapping("/enroll")
public String recipeEnrollPost(RecipeVO board) {
    log.info("RecipeVO : " + board);  //테스트용 등록이 잘되는지
    return "redirect:/recipe/board/enroll";
}

오류

An invalid form control with name='content' is not focusable.

content만 WYSIWYG 문서편집이 된 이유도

페이지 등록할때도 id가 content 라서 아래의 제이쿼리 if($('#content').length) id와 중복이 된 것.

if($('#content').length){
ClassicEditor
.create( document.querySelector( '#content' ))
.catch( error => { console.error( error ); } )
; }

왜 게시판 등록할때는 안되는거지??

페이지 추가할때 content만 문서편집 기능이 적용되야하는 이유는 뭐지..

.pageContent#content class,id 둘 다 적용되나 싶어서 했는데 안된다

그래서 그냥 class로만 해주기.

if($('.pageContent').length){
ClassicEditor
.create( document.querySelector( '#content' ))
.catch( error => { console.error( error ); } )
; }

= 페이지 등록할때 content만 문서편집 적용되는걸로...

[ recipe_enroll ]

WYSIWYG 문서 편집기능 적용안된걸 볼수있다

다시 테스트용으로 post매핑 해주면 log.info("RecipeVO : " + board); 이 적용되는지 콘솔로그 확인

→ int값이라 입력안돼서 0으로 들어가있음 (integer,Long을 하면 값이 들어가나?)

- 실제 DB에 입력하기

controller는 service를 갖다쓴다.

private RecipeService recipeService;

public RecipeController(RecipeService recipeService) {
    this.recipeService = recipeService;
}

recipeService.enroll(board); 을 post매핑에 추가

@PostMapping("/enroll")
public String recipeEnrollPost(RecipeVO board) {
recipeService.enroll(board);
return "redirect:/recipe/board/enroll";
}

= DB에 입력됨.

- Controller에서 리다이렉트로 메세지 전달하는 법. (난 안썼으나 기능을 알기위해 썼다.)

@PostMapping("/enroll")
public String recipeEnrollPost(RecipeVO board, RedirectAttributes attr) {
recipeService.enroll(board);
attr.addFlashAttribute("message", "게시물 등록 성공!");
return "redirect:/recipe/board/list";
}

→ 메세지가 보이고 리다이렉트로 recipe_list.html 페이지로

[ nav.html ] 모든 페이지에 적용되는 공통적인 nav에 썼다

<h6 id="pageName" class="font-weight-bolder mb-0 py-3">페이지 제목</h6>
<script th:if="${message}" th:inline="javascript">
let m = '[[${message}]]'; //리다이렉트로 넘어온 메세지를 저장
alert(m);
</script>

[ recipe_list.html ]

<script>
  document.getElementById('pageName').textContent = '게시판 목록';
</script>

'페이지 제목' → '게시판 목록' 으로 바뀜

LIST

'Spring boot | 쇼핑몰 만들기 | 어글리 마켓 > 게시판 만들기' 카테고리의 다른 글

레시판 게시글 조회 기능 (0)	2022.05.16
레시피 게시판 목록 만들기 (0)	2022.05.15
레시피 게시판 만들기 (0)	2022.05.15

혼자 깨닫기 위함