14. Spring MVC Framework를 이용한 데이터 생성

Back-end Developer/Spring Framework, 설정 및 실습

14. Spring MVC Framework를 이용한 데이터 생성

exponential-e 2019. 1. 17. 17:05

Spring framework 사용을 위한 설정은 다 해놨으니, 바로 데이터 생성 해봅시다.

createoffer.jsp form 생성

우선 우리가 만들어둔 createoffer.jsp에서 데이터를 받아서 넘겨 줄 수 있게 form을 생성할게요.

id는 계속 말씀드렸지만, auto increment니까 신경 쓸 필요 없구요.

나머지 친구들만 입력 받을 수 있게 표를 하나 만들께요.

우선 이 값들을 form 태그로 묶어서 그 안에 입력 받을 값들을 설정하겠습니다.

form 태그는 get 메소드를 사용 할 것이고, context root는 당연히 place holder로 받아요.

표로 약간 구성있는 척!을 해 놓으면 보기에도 좋기 때문에, table 태그도 사용했습니다.

name, email은 사실 생각보다 많이 긴 편은 아니잖아요 대부분, 그래서 간단한 input 태그 사용했고, text의 경우엔 길어질 수도 있으니... textarea 태그를 사용했습니다.

textarea 행과 열은 각 10씩만 주었습니다. 마지막엔 버튼을 만들어서 입력하고 보낼 수 있도록 유도했습니다.

버튼의 input value는 Create offer, type은 submit으로 주었습니다.

createoffer.jsp

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form method="get" action="${pageContext.request.contextPath}/docreate">
        <table>
            <tr>
                <td>Name: </td>
                <td><input name="name" type="text"/></td>
            </tr>
            <tr>
                <td>Email: </td>
                <td><input name="email" type="text"/></td>
            </tr>
            <tr>
                <td>Text: </td>
                <td><textarea name="text" rows="10" cols="10"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input value="Create offer" type="submit"/></td>
            </tr>
        </table>
    </form>
</body>
</html>
Colored by Color Scripter
cs

이렇게 하면 끝인데... 사실 실행해보시면 알겠지만, 모양이 참 눈뜨고 보기 힘들 그 정도 수준입니다.

그래서 css 파일을 하나 만들어서 이쁘게 모양을 잡아주려해요.

main.css 생성

경로는 webapp -> resources -> new folder, 파일명 css

해당 폴더에서 new -> other -> web의 css 선택하고 main.css로 파일 생성

우선 class selector('.')으로 적절하게 이름을 지정하고, 테이블 너비, 테두리 선, 내부 여백등을 설정합니다.

항목별 정렬도 해줍니다.

저는 .label에서 text-align으로 좌우 정렬을, vertical-align으로 상하 정렬을 해주었습니다.

그리고 입력 칸과 항목도 너무 붙어요.

그래서 input 태그에 클래스 셀렉터를 하나 붙여서 좌측 여백도 주었습니다. (.control)

참고!

설정할 때 계속 실행 시켜둔 상태로 새로고침 눌러서 확인해보면서 수정하시면 좀 더 빠르고 정확한 수정을 하실 수 있습니다.

textarea와 윗칸의 이메일 이름의 input 크기도 안맞아요. ㅠㅠ

textarea, input은 저처럼 쓰고 크기 설정해주세요. 기본적으로 제공되는 element이므로 element selector를 사용합니다.

main.css

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
@charset "UTF-8";
.formtable{
    width: 400px;
    border: 1px solid blue;
    margin: 50px;
    padding: 20px;
}
.label{
    text-align: right;
    vertical-align: top;
}
.control{
    margin-left: 20px;
}
textarea{
    width: 300px;
    hieght: 100px;
}
input[type=text]{
    width: 300px;
}
cs

요로케 해두셨으면 .formtable -> table 태그, .label -> td 태그, .control -> input 태그

이렇게 담아주시고 css 파일이 외부에 존재하니까 링크도 하나 달아주세요. 상단에!

createoffer.jsp

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
        href="${pageContext.request.contextPath}/resources/css/main.css">
 
<title>Insert title here</title>
</head>
<body>
    <form method="get" action="${pageContext.request.contextPath}/docreate">
        <table class="formtable">
            <tr>
                <td class="label">Name: </td>
                <td><input class="control" name="name" type="text"/></td>
            </tr>
            <tr>
                <td class="label">Email: </td>
                <td><input class="control" name="email" type="text"/></td>
            </tr>
            <tr>
                <td class="label">Text: </td>
                <td><textarea class="control" name="text" rows="10" cols="10"></textarea></td>
            </tr>
            <tr>
                <td class="label"></td>
                <td><input class="control" value="Create offer" type="submit"/></td>
            </tr>
        </table>
    </form>
</body>
</html>
Colored by Color Scripter
cs

페이지 생성 결과

ㅎㅎ 아주 이쁘게 잘 찍혔네요.

doCreate 메소드 생성

OffersController.java에서 doCreate 메소드 생성

doCreate 메소드

1
2
3
4
5
@RequestMapping("/docreate")
public String doCreate(Model model, Offer offer) {
        
    return "offercreated";
}
Colored by Color Scripter
cs

이런식으로 생성을 하는데, 인자로 Offer 객체가 들어옵니다.

jsp에서 사용자가 데이터를 입력해 버튼을 누르면 여기있는 Request 파라미터가 자동적으로 바인딩이 됩니다.

여기서 그냥 이렇게 딱! 끝날리는 없죠.

우리가 데이터를 입력하고 요청을 보내면 DB에 반영시키는 작업을 해야합니다.

따라서 우리가 만들었던 insert 메소드를 OffersService에

그리고 그 받아온 메소드를 다시 OffersController로 가져와서 인자로 받은 Offer를 DB에 적용 시킬 수 있도록 해줍니다.

OffersService.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
package kr.ac.snut.service;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import kr.ac.snut.dao.OfferDAO;
import kr.ac.snut.model.Offer;
 
@Service
public class OffersService {
    private OfferDAO offerDao;
    
    @Autowired
    public void setOfferDao(OfferDAO offerDao) {
        this.offerDao = offerDao;
    }
    
    public List<Offer> getCurrent(){
        return offerDao.getOffers();
    }
    
    public void insert(Offer offer) {
        offerDao.insert(offer);
    }
}
Colored by Color Scripter
cs

OffersController.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
39
40
41
42
43
package kr.ac.snut.controller;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
import kr.ac.snut.model.Offer;
import kr.ac.snut.service.OffersService;
 
@Controller
public class OffersController {
    private OffersService offersService;
    
    @Autowired
    public void setOffersService(OffersService offersService) {
        this.offersService = offersService;
    }
 
    @RequestMapping("/offers")
    public String showOffers(Model model) {
        List<Offer> offers = offersService.getCurrent();
        
        model.addAttribute("offers", offers);
        return "offers";
    }
    
    @RequestMapping("/createoffer")
    public String createOffer(Model model) {
        
        return "createoffer";
    }
    
    @RequestMapping("/docreate")
    public String doCreate(Model model, Offer offer) {
        offersService.insert(offer);
        
        return "offercreated";
    }
}
 
Colored by Color Scripter
cs

offercreated.jsp 생성

이건 뭐.. 우리가 데이터 입력하고 버튼을 누르면, '입력된 데이터를 바로 확인 하고싶다.'라는 생각

즉, 편의를 위한 작업인데, 귀찮으면 안하셔도 상관은 없습니다.

코드는 앞선 내용들에서 많이 봤기 때문에 굳이 첨언하지 않을게요.^____^

offercreated.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    offer created!!<br>
    <a href="${pageContext.request.contextPath}/offers"> click here to view current offers. </a>
</body>
</html>
Colored by Color Scripter
cs

결과 영상

마지막으로 결과 보여드리고, 저는 이만...

저작자표시 비영리 변경금지 (새창열림)