티스토리 뷰

웹/SpringBoot,게시판 만들기

[SpringBoot]5/15

cll179 2018. 5. 24. 15:52

1. boards.zip 다운로드 및 압축해제

 

2. 프로젝트 생성

sts → import → Maven → Exisiting maven project → browse → boards → board -→ finish

 

실행 후

http://localhost:8080/boards/list 들어가면 템플릿이 등장한다.

 

 

3.Controller 생성

/register에 등록을 할때 무조건 controller부터 구현한다.

 

*WebBoardController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package kr.ac.ks.board;
 
 
import org.springframework.beans.factory.annotation.Autowired;
 
import org.springframework.stereotype.Controller;
 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
@Controller
@RequestMapping("/boards/")
public class WebBoardController {
    
    @Autowired
    private WebBoardRepository repo;
    
    
    @GetMapping("/list")
    public void list(){
        
    }
    
    @GetMapping("/register")
    public void registerGET(@ModelAttribute("vo")WebBoard vo){
    }
    
    @PostMapping("/register")
    public String registerPOST(@ModelAttribute("vo")WebBoard vo, RedirectAttributes rttr){
        repo.save(vo);
        rttr.addFlashAttribute("msg", "success");
        
        return "redirect:/boards/list";
    }
}
 cs

 

src/main/resources → templates → boards → list.html 을 전부 복사해서

src/main/resources → templates → boards → register.html 파일 만들어서 복붙, 안에 content 부분 아래와 같이 수정

 

*register.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{/layout/webboard_layout}">
 
<div layout:fragment="content">    
    <div class ="panel-heading">Register Page</div>
    <div class ="panel-body">
        <form th:action="@{register}" method="post">
            <div class="form-group">
                <label>Title</label><input class="form-control" name="title" th:value="${vo.title}"/>
                <p class ="help-block">Title text here.</p>
            </div>
            
            <div class="form-group">
                <label>Content</label>
                <textarea class="form-control" rows="3" name='content' th:text="${vo.content}"></textarea>
            </div>
            
            <div class="form-group">
                <label>Writer</label><input class="form-control" name="writer" th:value="${vo.writer}"/>
            </div>
            <button type="submit" class="btn btn-default">Submit Button</button>
            <button type="reset" class="btn btn-primary">Reset Button</button>
        </form> 
    </div>
</div>
 
<th:block layout:fragment="script">
    <script th:inline="javascript">
    </script>
</th:block>
 cs

 

실행 후
http://localhost:8080/boards/register 로 들어가면 고의로 발생시킨 500 에러가 발생한다.(수업 후 완성된 코드로 작성한 게시물, 뜨지 않아도 ok)

 

화면 크기 조정

(위 코드에 이미 수정된 상태, 과정 생략)webBoardController로 가서 registerGET(@ModelAttribute("vo")WebBoard vo) 로 메소드 수정

templates → layout → webboard_layout.html 에서 아래와 같이 고치기

 

*webboard_layout.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>WebBoards</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/minty.css}">
</head>
<body>
 
    <div class = "container">
        <div layout:fragment="content"></div>
    </div>
    
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
 
    <th:block layout:fragment="script"></th:block>
 
</body>
</html>
 cs

 

register.html로 가서 input태그에 placeholder 속성 추가

 

*register.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{/layout/webboard_layout}">
 
<div layout:fragment="content">    
    <div class ="panel-heading">Register Page</div>
    <div class ="panel-body">
        <form th:action="@{register}" method="post">
            <div class="form-group">
                <label>Title</label><input class="form-control" name="title" 
                th:value="${vo.title}" placeholder="Title text here."/>
            </div>
            
            <div class="form-group">
                <label>Content</label>
                <textarea class="form-control" rows="3" name='content' th:text="${vo.content}" placeholder="Title text here."></textarea>
            </div>
            
            <div class="form-group">
                <label>Writer</label><input class="form-control" name="writer" th:value="${vo.writer}" placeholder="Title text here."/>
            </div>
            <button type="submit" class="btn btn-default">Submit Button</button>
            <button type="reset" class="btn btn-primary">Reset Button</button>
        </form> 
    </div>
</div>
 
<th:block layout:fragment="script">
    <script th:inline="javascript">
    </script>
</th:block>
 cs

 

작성 후 실행

 

 

**저장하는 기능 구현

새로 저장한 것을 최상단으로 올리기 위해서 findAll + 소팅 해야한다 

소팅은 시간 기준으로 그래서 WebBoard.java 에 Timestamp가 쓰인다.

 

localhost:8080/h2-console로 들어가서

JDBC URL : jdbc:h2:mem:testdb로 수정 후 접속

TBL_WEBBOARDS 클릭해서 RUN 하면 101번째에 들어가 있다.

저작자표시 비영리 변경금지

'웹 > SpringBoot,게시판 만들기' 카테고리의 다른 글

[SpringBoot]5/29  (0) 2018.06.01
[SpringBoot]5/8  (0) 2018.05.14
[SpringBoot]MySQL 설치 및 테스트  (2) 2018.04.27
[SpringBoot]스프링부트 프로젝트 생성하기  (0) 2018.04.27
댓글