하루의 일상💜

[Spring] #4. 게시판만들기 _ 입력받은 데이터를 화면에 보이기 본문

SpringBoot

[Spring] #4. 게시판만들기 _ 입력받은 데이터를 화면에 보이기

도하루박 2022. 11. 24. 00:13
반응형
list.html 
<tbody>
 	<th:block th:each="board:${boards}">
    	<tr class="tBody" th:object="${board}">
           <td class="boardNumber" th:text="*{boardNumber}"></td>
           <td class="boardTitle"><a class="read" th:text="*{boardTitle}" th:href="*{boardNumber}"></a></td>
           <td class="boardWriter" th:text="*{boardWriter}"></td>
           <td class="boardRegisterDate" th:text="*{boardRegisterDate}"></td>
           <td class="boardUpdateDate" th:text="*{boardUpdateDate}"></td>
        </tr>
 	</th:block>​
 </tbody>

위에서 th부분에서 목록이기 때문에 반복문을 사용하였다.

받아오는 파라미터값을 ${boards}로 설정하여 board에 담았다.

그 후엔 게시글의 갯수만큼 tr이 생기게 될 것이다.

 

그리고 tr에서 ${board}를 선언하여 아래에 td에서 *{}를 사용하여 바로 사용할 수 있다.

<td class="boardTitle"><a class="read" th:text="*{boardTitle}" th:href="*{boardNumber}"></a></td>

위 부분에서는 boardTitle에 a 링크를 설정하였는데 여기서 class 이름은 read는 바로 BoardController에서 설정한 전송 메서드를 사용한 것이다. 

그렇기 때문에 BoardTitle를 누르게 되면 클릭한 게시물의 번호가 담기게 설정해놓은 것이다.

js 에서 href 값을 가져와서 해당 readController로 보내게 될 것이다.

설정한 경로인 localhost:10003/board/list 경로를 url에 작성하게 되면 db에 저장되었던 boardList 정보가 나오게 된다.

위에서 글 등록을 눌렀을 때 write 페이지로 이동하기 위해서는 아래와 같은 쿼리가 필요하다.

<script>
    $("a.write").on("click", function(e){
        e.preventDefault();
        location.href = "/board/write";
    });
</script>

a 태그 안에있는 write를 누르게 되면 현재 경로를 /board/write로 변경된다.

// write는 controller의 메서드 이름과 버튼의 class 이름

 

 

write.html
<form method="post" th:action="@{/board/write}" id="writeForm" th:object="${board}">
	<div class="fields">
     	<div class="field">
       		<h4>제목</h4>
         		<input th:field="*{boardTitle}" placeholder="Title" type="text" />
    </div>
    <div class="field">
    	<h4>내용</h4>
            <textarea th:field="*{boardContent}" rows="6" placeholder="Content" style="resize:none"></textarea>
    </div>
    <div class="field">
       <h4>작성자</h4>
          <input th:field="*{boardWriter}" placeholder="Writer" type="text" />
    </div>
    </div>
      <ul class="actions special">
         <li><input type="submit" class="button" value="등록" /></li>
       </ul>
</form>

목록보기의 버튼에서 

form 태그 action은 타임리프를 적용하여 board/write로 가게 설정해 두었다.

그리고 완료버튼을 눌렀을 때 동작하는 이동버튼이기 때문에 메서드 방식은 post 방식으로 하였다.

 

#BoardController 에서 write 부분의 리턴값을 변경해준다.

@GetMapping("/write")
    public void write(Model model){
        model.addAttribute("board", new BoardVO());
    }
<body class="is-preload">
<!-- Main -->
<div id="main">
    <div class="wrapper">
        <div class="inner">
            <!-- Elements -->
            <header class="major">
                <h1>Board</h1>
                <p>게시글 등록</p>
            </header>
            <!-- Table -->
            <h3><a class="list button small">목록 보기</a></h3>
            <div class="content">
                <div class="form">
                    <form method="post" th:action="@{/board/write}" id="writeForm" th:object="${board}">
                        <div class="fields">
                            <div class="field">
                                <h4>제목</h4>
                                <input th:field="*{boardTitle}" placeholder="Title" type="text" />
                            </div>
                            <div class="field">
                                <h4>내용</h4>
                                <textarea th:field="*{boardContent}" rows="6" placeholder="Content" style="resize:none"></textarea>
                            </div>
                            <div class="field">
                                <h4>작성자</h4>
                                <input th:field="*{boardWriter}" placeholder="Writer" type="text" />
                            </div>
                        </div>
                        <ul class="actions special">
                            <li><input type="submit" class="button" value="등록" /></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

 

게시글을 작성했을 때 alert 창으로 "**번 게시글이 등록되었습니다." 라는 문구를 띄우고 싶 을때

list.html js 부분에 아래 쿼리를 작성해준다.

<script th:inline="javascript">
// 타임리프에 있는 스크립트 태그를 사용하는 것이다.
    let boardNumber = [[${boardNumber}]];
    	//list.html에서 파라미터로 전달받은 ${boardNumber}를 let으로 전달받아서 사용할 수 있게 된다.
    if(boardNumber != null){
        alert(boardNumber + "번 게시글이 등록되었습니다.");
    }
    //boardNumber가 null이 아닐때에만 alert이 뜨게 된다.(등록이 되었을때만 alert이 뜬다)

    $("a.write").on("click", function(e){
        e.preventDefault();
        location.href = "/board/write";
    });
</script>

 

그리고 write부분에서 작성이 완료되고 목록보기로 돌아갔을때 작성한 boardNumber가 추가 되면서 목록이 보여질 수 있어야 하기 때문에 write.html 부분에 js를 추가해 준다,

<script>
    $("a.list").on("click", function(e){
        e.preventDefault();
        location.href = "/board/list";
    });
</script>

 

 

게시글 목록에서 게시글 제목을 눌렀을 때에 해당 글 수정이 가능한 write로 이동하기
<td class="boardTitle"><a class="read" th:text="*{boardTitle}" th:href="@{/board/read(boardNumber=*{boardNumber})}"></a></td>

list.html에서 boardTitle에 해당하는 a 태그를 변경해준다.

변경한 href는 boardNumber로 파라미터를 전달해야지만 데이터를 불러올 수 있다. read() 안에 파라미터를 전달

 

 

read.html

게시글 제목을 눌렀을 때 게시글의 데이터를 전달받아 보여지는 화면

<form th:action="@{/board/delete}" th:object="${board}">
     <div class="fields">
       <div class="field">
          <h4>번호</h4>
             <input type="text" th:field="*{boardNumber}" readonly/>
        </div>
        <div class="field">
           <h4>제목</h4>
              <input type="text" th:field="*{boardTitle}" readonly/>
          </div>
          <div class="field">
            <h4>내용</h4>
              <textarea rows="6" style="resize:none" readonly th:field="*{boardContent}"></textarea>
           </div>
           <div class="field">
              <h4>작성자</h4>
              <input type="text" th:field="*{boardWriter}" readonly/>
            </div>
          </div>
            <ul class="actions special">
               <li>
                  <input type="button" class="button" value="수정" onclick="goUpdate()"/>
                  <input type="submit" class="button" value="삭제"/>
               </li>
            </ul>
</form>

여기서 input의 삭제를 누르면 submit이 th:action의 delete로 이동을 하기 때문에 삭제를 한 후 다시 list로 돌아가게 된다.

@GetMapping("/delete")
public RedirectView delete(Long boardNumber){
    boardService.remove(boardNumber);
    return new RedirectView("/board/list");
}

왜냐하면 위와 같이 Controller에서 RedirectView를 통해 list로 이동하게 경로를 설정하였기 때문이다.

 

input의 수정버튼을 활용하기 위한 js 코드

<script th:inline="javascript">
    let boardNumber = [[${board.boardNumber}]];

    function goUpdate(){
        location.href = "/board/update?boardNumber=" + boardNumber;
    }

    $("a.list").on("click", function(e){
        e.preventDefault();
        location.href = "/board/list";
    });
</script>

 

 

updata.html

read.html 에서 수정버튼을 눌렀을 때 수정 가능한 페이지로 이동하는 화면

<form method="post" th:action="@{/board/update}" th:object="${board}" id="updateForm">
    <div class="fields">
        <div class="field">
            <h4>번호</h4>
            <input type="text" th:field="*{boardNumber}" readonly/>
        </div>
        <div class="field">
            <h4>*제목</h4>
            <input type="text" th:field="*{boardTitle}"/>
        </div>
        <div class="field">
            <h4>*내용</h4>
            <textarea rows="6" style="resize:none" th:field="*{boardContent}"></textarea>
        </div>
        <div class="field">
            <h4>작성자</h4>
            <input type="text" th:field="*{boardWriter}" readonly/>
        </div>
    </div>
    <ul class="actions special">
        <li>
            <input type="submit" class="button" value="수정 완료"/>
        </li>
    </ul>
</form>

readonly를 사용하게 되면 수정이 불가능하게 설정한다.

 

 

 

 

 

 

 

app11_16 (2).zip
2.86MB

반응형
저작자표시

'SpringBoot' 카테고리의 다른 글

[Spring] #6. 게시판만들기_첨부파일 업로드/수정/삭제  (0) 2022.12.29
[Spring] #5. 게시판 만들기 _ 페이징처리  (0) 2022.12.12
[Spring] #3. 게시판 만들기 _ Controller  (0) 2022.11.23
[Spring] #2. 게시판 만들기 _ DAO, Service 생성  (0) 2022.11.18
[Spring] #1. 게시판 만들기 _ DB 테이블 VO로 만들고 Mapper에서 DB로 insert 하기 (추가, 수정, 조회, 전체조회)  (0) 2022.11.18
'SpringBoot' Related Articles more