봉봉의 개인 블로그

2017-07-06-P 본문

학원에서 배운것들/TEA - P

2017-07-06-P

봉봉이네 2017. 7. 6. 12:39

Maven 게시판 예제 모델2와 JSTL 활용해서 만들기


model2방식.zip

위 파일을 보고 midel2 도 만들수 있다.


Spring 시작하기 !


Spring tool suite

스프링을 사용하기에 앞서 설정자체가 많이 복잡한데 그 설정을

그마나 좀더 용이하게 하기 위해서 Spring 사이트에서

이클립스를 가져가서 Spring 사용에 좀더 편하게 만들것을

Spring tool suite 라고 한다.(즉 이클립스 라는것이다.)

먼저 Spring tool suite 를 치고 들어가줍니다.

https://spring.io/tools/sts/all 이사이트에 들어가서 window에 맞는 버전을 받아줍니다.

다운로드 다 되게 되면

이런식으로 떠있게 되는데 저 STS.exe 가 실행 파일이다 (*압축을 풀때 에러가 날텐데 그 이유는 파일명이 너무 긴게 있어서 그렇다 z7 같은걸로 압축을 풀게 되면 괜찮지만 지금은 그 파일들을 사용하지 않기 때문에 그냥 압축을 풀었다)

이런식으로 떠있게 됩니다. 그러면 프로젝트 쪽에 서버와 아래 서버에서의 서버를 모두 지운다음 다시 톰캣을 다시 연결해줍니다.

이런식으로 만들어 줍니다 그다음으로 이제 Spring 관련해서 이제 프로젝트를 만들어볼것이다.

이런식으로 들어가서 Spring Legacy Project 를 들어가줍니다.

이런식의 창이 뜨게 되면 맨아래에 Spring MVC Project를 눌러서 만들어 줄수 있습니다 

(*지금 활성화가 안되어있는 이유는 프로젝트 이름을 정하지 않아서 그렇다.)

Next를 눌러 넘어오게 되면 이화면이 나오는데 이화면은 패키지를 정해주는거랑 비슷하다고 생각하면된다 .

프로젝트를 만들고 오른쪽 아래에 다운이 다되게 되면 여기서 사진과 같이 빌드패스를 들어가서 자바 버전은 1.8로 변경해줍니다.

그다음으로 pom.xml 에 들어가서 셋팅을 해줄것이다 ( 이부분은 Maven 셋팅이라고 생각하면된다.)

위에 보이는 부분을 지워줍니다.

그리고 위에있는부분도 지워줍니다.

그리고 위의 부분의 version부분을 4.3.9.RELEASE 로 바꿔서 채눠넣어줍니다.


그후 mysql를 사용할꺼기 때문에 mysql 를 추가해주도록 합니다.

그후 아래로 내리다 보면

주석처리된 부분이 나오게 된다. 저부분을 주석처리 해주면 된다

주석처리하는 이유는 저건 위에있는 부분은 servlet 부분과 관련된 것이지만 버전자체가 낮기 때문에 새로 프로젝트내에 톰캣으로 다시 넣어줄꺼기 때문이다

그다음으로 아래 있는 jsp 파일도 버전이 맞지 않기 때문에 주석처리를 해준다.

그후 위사진과 같이 빌드패스를 통해서 톰캣라이브러리를 추가해줍니다.

다음으로 할것은 web.xml 에 설정에 관련된 것이다.(servlet 에 관련된 셋팅이라고 생각하면된다.)

위 사진과 같이 위의 listener 부분의 내용을 지워줍니다.  아래있는 Processes application requests 부분도 마찬가지로 servlet에 관련된 설정 파일이지만 위에껀 이벤트가 발생되었을때 되는것이고 아래껀 contoller라고 생각하면된다.

즉 servlet 을 건들일수 있는 설정이라는소리이다 아래껀

지금은 헷갈리므로 두가지중 한가지만 사용하겠다.

설명을 쪼금만하자면 아래쪽에 / 부분에 대한 설명을 하자면 요청을 / 가 들어가도록 요청하게 되면 이 servlet 에서 다 가로채서 요청을 처리하겠다는 소리이다. 그후 1이라고 적힌부분은 프로그램이 시작될떄 이 셋팅을 바로 시작하겠다 즉 servlet 자체를 만들겠다라고 생각하면 편할것이다.

다음으로 할것이 또있다.

Spring 안에 root-context.xml 파일을 지워줍니다. 여기까지가 web쪽 관련된 셋팅이라고 생각하면된다.

다음으로는 Spring에 관련된 설정이라고 생각하면된다 위 사진과 같은 파일로 들어가줍니다.

그후 위 사진과 같은 사진의 내용을

위사진과 같이 바꿔줍니다. 즉 원래 mvc 가 메인이였다면 beans를 메인으로 바꾼것이다.

(지금은 이정도만 이해하고 넘어가도록하자)

다음으로 설명할부분은 java 부분에 com.jjdev.mvc 안에 있는 HomeController 클래스에 대해서 설명하겠다.

HomeController 은 Controller 는 맞지만 servlet 은 아니다 Spring 에서는 servlet 을 하나밖에 제공해주지 않는다.

하지만 어노테이션을 통해( @Controller) servlet 즉 Controller의 역활을 할수 있게끔 만들어준다고 생각하면된다.

그리고 아래 RequestMapping 어노테이션에 대해서 설명하자면 get 방식으로 / 로 요청된것은 모두 여기로 온다고 생각하면된다. 즉 처음에 서버를 start 할때 /를 요청하게 된다 . 그런대 여기서 /로 요청하였기 때문에 이 HomeController 로 오게 되는것이다 여기서 home이라는 메서드가 실행이 되게 됩니다.그리고 이것은 리턴될때 servlet 객체로 넘겨지게 되는거 같다. 넘겨 지게 되는데 넘겨질때 home이라는 것이 리턴되서 servlet 으로 넘겨 지는데 이 servlet 을 아까 Spring 셋팅할때 부분에서 이 객체는 home 이라고 요청을 하더라도 home.jsp 로 요청하게 된다고 생각하면된다. 즉 그러니깐 요청은 /를 통해서 프로젝트명/ 이렇게만 요청햇지만 HomeController 에서 요청을 가로채서 home이라는것을 리턴하엿기 때문에 요청은 / 만 요청하엿지만 home.jsp화면이 보여지게 되는것이다.

이제 게시판 예제를 조금 만들어볼것이다.

먼저 

views 안에 아래와 boardAdd.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<!-- bootstrap을 사용하기 위한 CDN주소 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
<!-- jquery를 사용하기위한 CDN주소 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<!-- bootstrap javascript소스를 사용하기 위한 CDN주소 -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
<script>
    $(document).ready(function(){
    //    alert('jquery test');
    /* 입력폼 유효성 관련 요구사항
        1. 모든 폼은 공백 또는 "" 문자는 입력되면 안된다.
        2. 비밀번호는 4자이상 입력하여야 한다.
    */
        $('#addButton').click(function(){
            if($('#boardPw').val().length <4) {
                alert('boardPw는 4자이상 이어야 합니다');
                $('#boardPw').focus();
            } else if($('#boardTitle').val()=='') {
                alert('boardTitle을 입력하세요');
                $('#boardTitle').focus();
            } else if($('#boardContent').val()=='') {
                alert('boardContent을 입력하세요');
                $('#boardContent').focus();
            } else if($('#boardUser').val()=='') {
                alert('boardUser을 입력하세요');
                $('#boardUser').focus();
            } else {
                $('#addForm').submit();
            }
        });
    });
</script>
<title>BOARD ADD(spring mvc 방식)</title>
</head>
<body>
<div class="container">
    <h1>BOARD ADD(spring mvc 방식)</h1>
    <form id="addForm" action="${pageContext.request.contextPath}/boardAdd" method="post">
        <div class="form-group">
            <label for="boardPw">boardPw :</label>
            <input class="form-control" name="boardPw" id="boardPw" type="password"/>
        </div>
        <div class="form-group">
            <label for="boardPw">boardTitle :</label>
            <input class="form-control" name="boardTitle" id="boardTitle" type="text"/>
        </div>
        <div class="form-group">
            <label for="boardContent">boardContent :</label>
            <textarea class="form-control" name="boardContent" id="boardContent" rows="5" cols="50"></textarea>
        </div>
        <div class="form-group">
            <label for="boardName">boardName :</label>
            <input class="form-control" name="boardUser" id="boardUser" type="text"/>
        </div>
        <div>
            <input class="btn btn-default" id="addButton" type="button" value="글입력"/>
            <input class="btn btn-default" type="reset" value="초기화"/>
            <a class="btn btn-default" href="${pageContext.request.contextPath}/boardList">글목록</a>
        </div>
    </form>
</div>
</body>
</html>
 
cs

위와 같이 적어줍니다 .위와같이 적어준다음에

위와같은 java 클래스 파일을 만들어줍니다.

제일먼저 만들어야 할것은 BoardContoller.java 파일입니다.

BoardContoller.java안을 살펴보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.jjdev.mvc;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
public class BoardController {
    @Autowired
    BoardDao boardDao;
    @RequestMapping(value="/boardAdd",method = RequestMethod.GET)
    public String boardAdd(){
        return "boardAdd";
    }
    @RequestMapping(value="/boardAdd",method = RequestMethod.POST)
    public String boardAdd(Board board){
        boardDao.insertBoard(board);
        return "redirect:/";
    }
}
 
csd

위와 같이 적어줍니다 설명을 조금하자면 

먼저 @Controller 가 붙어있기 때문에 Controller로 써의 역활을 하게 됩니다.

그후일단은 @Autowired 와 아래 있는 16~20번까지는 생략하고 설명하겠다.

12~15번까지설명을하자면 get방식으로 /boardAdd라고 요청하면 boardAdd라는 메서드가 실행될것이다. 그러면 여기선 리턴을 boardAdd 를 시키고 있다 그러면 servlet 으로 넘어가기 때문에 boardAdd.jsp 로 이동하게 될것이다.

여기서 잠깐 실행을해보겠다.

먼저 실행을하려면 평소에 이클립스에서 실핼하던거와는 다르게 실행하여야한다.

이런식으로 Run on server 를 키면 된다.

키게 되면

이런식으로 home.jsp 화면이 보이게 된다. 그러면 여기서 주소창에 http://localhost/mvc/boardAdd 이런식으로 요청하게 되면 boardAdd.jsp 화면이 보이게 될것이다.

이런식으로 화면이 뜨게 되는것이다.

이제 여기서 입력을 하게 글입력을 누르면 DB에 저장이 되어야한다. 아까 boardAdd.jsp 파일안을 보면

<form id="addForm" action="${pageContext.request.contextPath}/boardAdd" method="post"> 부분을보면

post 방식으로 /boardAdd를 똑같이 요청하고 있다.

즉 화면으로 이동할때도 /boardAdd 로 요청하고 있고 글을 입력할때도 /boardAdd를 요청하고 있는것이다.

하지만 다른점은 하나는 get 방식 요청이고 하나는 post 요청이라는것이다.

다시 BoardContoller.java 으로 돌아와서 post 방식으로 요청하였기 때문에 2번째에있는 

@RequestMapping(value="/boardAdd",method = RequestMethod.POST)

public String boardAdd(Board board){

boardDao.insertBoard(board);

return "redirect:/";

}메서드가 호출되게 되는것이다.

하지만 메서드 명까지 같기 때문에 안될것같지만 오버로딩 되어 같은 메서드명을 사용하더라도 매개변수값이 다르기 때문에 사용할수 있게 되는것이다.  그런데 여기서 보면 Board 의 객체가 매개변수로 해서 들어오게 된다.

하지만 글내용에는 new 생성자가 없다. new 생성자 역활을 하게되는것이 바로 위쪽에 어노테이션인 @Autowired 인것이다. 이것을 자세하게 설명하기 위해서 먼저 DTO 같은 객체가 필요하다.

Board.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
44
45
46
47
48
49
50
51
52
package com.jjdev.mvc;
 
public class Board { 
    private int boardNo;
    private String boardPw;
    private String boardTitle;
    private String boardContent;
    private String boardUser;
    private String boardDate;
    public int getBoardNo() {
        return boardNo;
    }
    public void setBoardNo(int boardNo) {
        this.boardNo = boardNo;
    }
    public String getBoardPw() {
        return boardPw;
    }
    public void setBoardPw(String boardPw) {
        this.boardPw = boardPw;
    }
    public String getBoardTitle() {
        return boardTitle;
    }
    public void setBoardTitle(String boardTitle) {
        this.boardTitle = boardTitle;
    }
    public String getBoardContent() {
        return boardContent;
    }
    public void setBoardContent(String boardContent) {
        this.boardContent = boardContent;
    }
    public String getBoardUser() {
        return boardUser;
    }
    public void setBoardUser(String boardUser) {
        this.boardUser = boardUser;
    }
    public String getBoardDate() {
        return boardDate;
    }
    public void setBoardDate(String boardDate) {
        this.boardDate = boardDate;
    }
    @Override
    public String toString() {
        return "Board [boardNo=" + boardNo + ", boardPw=" + boardPw + ", boardTitle=" + boardTitle + ", boardContent="
                + boardContent + ", boardUser=" + boardUser + ", boardDate=" + boardDate + "]";
    }
}
 
cs

위와 같이 채워줍니다. 

그후 다시 돌아와서 

Autowired 에 대해서 설명하자면 아래 적힌 BoardDao 타입의 boardDao 객체를 만들어준다고 생각하면되고

그안에 insertBoard 안에 board를 주입한다고 생각하면된다. 그러면 BoardDao를 살펴보면 아래와같이 적혀있다.

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
44
package com.jjdev.mvc;
 
import java.sql.DriverManager;
 
import org.springframework.stereotype.Repository;
 
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
 
@Repository
public class BoardDao {
     
      public int insertBoard(Board board) {
            Connection connection = null;
            PreparedStatement statement = null;
            int row = 0;
            try {
                connection = this.getConnection();
                String sql = "INSERT INTO board(board_pw, board_title, board_content, board_user, board_date) values(?,?,?,?,now())";
                statement = (PreparedStatement) connection.prepareStatement(sql);
                statement.setString(1,board.getBoardPw());
                statement.setString(2,board.getBoardTitle());
                statement.setString(3,board.getBoardContent());
                statement.setString(4,board.getBoardUser());
                row = statement.executeUpdate(); 
            } catch(Exception e) {
                e.printStackTrace();
                System.out.print("error");
            } finally {
                try {statement.close();} catch(Exception e){}
                try {connection.close();} catch(Exception e){}
            }
            return row;
        }
        public Connection getConnection() throws Exception {
            Class.forName("com.mysql.jdbc.Driver");
            String dbUrl = "jdbc:mysql://127.0.0.1:3306/model2?useUnicode=true&characterEncoding=euckr";
            String dbUser = "root";
            String dbPw = "java0000";
            Connection connection = (Connection) DriverManager.getConnection(dbUrl, dbUser, dbPw);
            return connection;
        }
}
 
cs

설명을 하자면 

Board 객체를 받기위해선 생성자가 있어야하고 그생성자를 통해서 객체를 받아야하지만 주입을 받을 객체가 있을때 어노테이션인 Repository 를 이용해서 객체를 주입받는다고 생각하면된다. 나머지부분은생략하도록하겠다.

다시 호출한곳으로 돌아와서 BoardController 클래스를 살펴보면 리턴을 redirect로 / 를 요청하겠다고 적해진것이다

그러면 다시 home.jsp 로 이동하고 DB에는 데이터가 입력이 되어야한다는것이다.

다시 실행해서 위사진과 같이 입력하고 글입력을 누르게 되면

이화면으로 돌아와 있는것을 확인할수 있으며

DB안에 11111이 들어가 있는것도 확인해볼수 있다 (*26번임)

저작자표시

'학원에서 배운것들 > TEA - P' 카테고리의 다른 글

2017-07-13-P(의존성 주입)  (0) 2017.07.13
2017-07-07-P  (0) 2017.07.07
2017-06-27-P  (0) 2017.06.27
2017-06-26-P  (0) 2017.06.26
2017-06-23-P  (0) 2017.06.23
공유하기 링크
'학원에서 배운것들/TEA - P' Related Articles more
Comments