인기포스트

ABOUT ME

Don't dwell on the past!

Today
Yesterday
Total
  • 14. Spring MVC Framework를 이용한 데이터 생성
    Back-end Developer/Spring Framework, 설정 및 실습 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>
    		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>
    		cs



    페이지 생성 결과



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



    doCreate 메소드 생성


    OffersController.java에서 doCreate 메소드 생성


    doCreate 메소드

    1
    2
    3
    4
    5
    @RequestMapping("/docreate")
    public String doCreate(Model model, Offer offer) {
            
        return "offercreated";
    }
    		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);
        }
    }
    		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";
        }
    }
     
    		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>
    		cs



    결과 영상


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


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

    'Back-end Developer > Spring Framework, 설정 및 실습' 카테고리의 다른 글

    15. 각 항목에 알맞는 데이터인지 확인하기  (0) 2019.01.21
    13. Spring MVC Framework를 이용한 데이터 조회  (0) 2019.01.13
    12. Spring MVC framework 설정하기  (0) 2019.01.09
    11. Query문을 통한 CRUD 구현  (2) 2019.01.07
    10. Query 문을 이용한 Data Access  (0) 2018.12.31

    관련글 관련글 더보기

    댓글

Designed by minchoba.

티스토리툴바