JSP 게시판 만들기(1) MVC패턴 model2

JSP

JSP 게시판 만들기(1) MVC패턴 model2

태태딩 2019. 6. 30. 23:30

이번에는 mvc패턴을 사용한 model2 구조로 게시판을 만들어보겠다.

시작하기에 앞서 mvc패턴이 무엇이냐 model2 구조는 무엇인가 하는 의문이 들 수 있다.

먼저 mvc 패턴은 웹 개발을 하는 사람이라면 질리도록 들을 수밖에 없는 디자인 패턴으로서 (Model-View-Controller)의 약자이다. 이 디자인 패턴을 사용하지 않더라면 프로젝트를 할 때 다른 이들과 어떻게 하면 더 깔끔하고 유지보수에 편리하고, 좋을지를 생각하며 처음부터 끝까지 구상을 해야 할 것이다. 하지만 이렇게 다 정의가 되어있는 디자인 패턴을 사용한다면 우리는 정의되어 있는 대로 만들고 유지보수에서도 어려움이 없을 것이다.

간략하게 설명하자면

Model : 애플리케이션의 정보, 데이터를 나타낸다
View : 사용자가 볼 수 있는 인터페이스 화면 출력을 나타낸다.
Controller : model과 view를 이어주는 다리 역할로 요청에 대한 처리를 나타낸다.

자 간단하게 mvc패턴에 대해 알아보았다. 더 자세한 사항은 구글에 mvc패턴만 쳐봐도 수두룩하게 나오기 때문에 궁금한 사람은 검색해보면 좋을 것이다.

이번에는 사용한다고 했던 Model2 구조를 알아보겠다. JSP 웹 아키텍처는 크게 Model1 구조와 Model2 구조로 나뉜다.

이 두 가지의 차이점은 JSP에서 나타난다.

Model 1 구조는 JSP페이지에서 View와 Controller 부분을 모두 처리하는 것을 말하고, Model2 구조는 JSP가 결과의 출력만을 나타낸다.

말 그대로 model1은 (View+Controller)이고, model2는 (View)이다.

model1 방식은 단점이 많다. 우선 JSP에서 여러 가지를 다 처리하기 때문에 보기에도 복잡하고, 프런트엔드와 벡엔드의 일터가 같다고 생각하면 정말이지 골치가 아프다. 분업도 용이하지 않게 되고, 코드가 지저분해지기 때문에 사용을 추천하지 않는다. 다루기 어렵다는 평이 있지만 model2 방식을 사용하자.

이제 간단하게 mvc패턴과 model2 구조에 대해서 알아보았다. 게시판을 만들어보도록 하자.

제일 먼저 이클립스를 사용하여 프로젝트를 만들기로 한다.

Project Explorer에서 Dynamic Web Project를 하나 만들어준다.

프로젝트 이름을 지어주고 Finish를 누른다. (아파치 톰캣 8.5를 사용했다.)

데이터베이스는 오라클을 사용했다.

SQL Developer에서 테이블들을 생성해주었다.

그 후 필요한 패키지들을 만들어줍니다.

그리고 페이지 디자인은 부트스트랩을 이용해서 최소한의 형식만 사용했습니다.

제일 먼저 로그인 기능부터 구현해줍니다.

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content ="width=device-width",initial-scale="1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<title>JSP 게시판 웹 사이트</title>
</head>
<body>
   <div class="container">
      <div class="col-lg-4"></div>
      <div class="col-lg-4">
         <div class="jumbotron" style="padding-top:20px;">
            <form method="post" action="">
               <h3 style="text-align:center;">로그인 화면</h3>
	               <div class="form-group">
	                  <input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
	               </div>
                   <div class="form-group">
                      <input type="password" class="form-control" placeholder="비밀번호" name="userPass" maxlength="20">
                   </div>
               <div>
               		<input type="checkbox" name="check">아이디 기억 (1분만)
               </div>
               <input type="submit" class="btn btn-primary form-control" value="로그인">
            </form>
         </div>
      </div>
      <div class="col-lg-4"></div>
   </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

com.thboard.www.dto 패키지에 UserDto부터 만들어줍니다.

다음은 Dao를 만들어줍니다.

먼저 커넥션을 준비해줍니다.

로그인에 관련된 기능을 구현합니다.

UserDao 의 일부
	
    // 로그인 처리 부분
	public int loginProc(String userID,String userPass) {
		String sql = "select userID,userPass from sibarUser where userID = ? and userPass = ? ";
		
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, userID);
			pstmt.setString(2, userPass);
			rs = pstmt.executeQuery();
			if(rs.next()) {
				try {
					pstmt.close();
					rs.close();
					con.close();
				} catch (SQLException e) {
				}
			
				return 1;
			}
		} catch (SQLException e) {
			System.err.println("로그인 sql 오류");
		} finally {
			try {
				pstmt.close();
				rs.close();
				con.close();
			} catch (SQLException e) {
			}
		}
		
		return -1;
	}

다음글에서 계속...

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