본문 바로가기
Java . Spring . Web . SQL

[Model 1] Model 1 아키텍처로 게시판 개발

by heidish 2020. 10. 21.
반응형

 

 

 

 

 

 

Model 1 아키텍처

 

 

90년대 말부터 2000년대 초까지 자바 기반의 웹 애플리케이션 개발에 사용된 아키텍처.

 

Model 1 아키텍처는 JSP 와 JavaBeans 만 사용해서 웹을 개발한다.

위와 같은 구조를 하고있다.

 

 

 

Model 1 아키텍처에서의 JavaBeans 는 Model 기능을 하는데,

자바에서 Bean 이란 용어는 "객체"를 의미하기 때문에

JavaBeans 란 결국 자바 객체를 의미하게 되며, DB 연동에 사용되는 자바 객체들이다.

 

그리고 Model 의 정확한 의미는

=>   데이터베이스 연동 로직을 제공하면서 DB에서 검색한 데이터가 저장되는 자바 객체이다 !

 

즉, 여태 포스팅에서 계속 나왔던 BoardVO, UserVO, BoardDAO, UserDAO 클래스들이 바로 Model 기능의 자바 객체임..

 

 

 

 

Model 1 아키텍처에서는 JSP 파일이 Controller, View 기능을 모두 처리하기 때문에 아주아주 중요하다.

 

 

여기서 Controller 기능은 JSP 파일에 작성된 자바코드를 의미한다.

근데 그렇다고 JSP에 작성된 모든 자바코드가 Controller 인건 아닌데,

일반적으로 Controller는 사용자의 요청 처리와 관련된 자바 코드를 의미한다.

 

 

그리고 JSP 에서는 Model 을 사용해서 검색한 데이터를 사용자가 원하는 화면으로 제공하기 위해서

다양한 마크업(markup)을 사용하는데, 사용되는 대표적 마크업 언어는 HTML, CSS 두가지이다.

이 두가지 마크업이 View 기능을 담당한다.

 

 

 

 

 

정리하자면,

Model 1 구조에서는 JSP 파일에서 Controller 기능과 View 기능을 모두 처리하기 때문에

JSP 파일 내에 자바코드와 마크업관련 코드들이 섞여있어서 역할 구분이 명확하지 못하고,

JSP 파일에 대한 디버깅과 유지보수가 어렵다 !

 

따라서 Model 1 구조는 소규모 프로젝트에는 사용 가능하지만, 엔터프라이즈 급의 복잡한 시스템에는 부적합하다.

 

이런 문제점을 보완하기 위해 등장한게 Model 2, 즉 MVC(Model View Controller) 아키텍처이다.

MVC는 다른 글에서 다룰 예정이고, 여기서는 Model 1 아키텍처 구조의 게시판을 구현할것임 !

 

 

 

 

 

<  사전 작업  >

 

 

 

lib 폴더 생성 후,

 

C:\sqldeveloper\jdbc\lib 로 가서

ojdbc8.jar 파일 찾아서 복사한 뒤

lib 폴더 생성한데다가 붙여넣기.

 

 

 

 

src > main > webapp 폴더에다가 JSP 파일을 생성하자...!

 

 

 

( login.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body align="center">
	<h1>로그인</h1>
	<hr>
	<div align="center">
		<form action="login_proc.jsp" method="post">
			<table border="1" cellpadding="0" cellspacing="0">
				<tr>
					<td bgcolor="orange">아이디</td>
					<td><input type="text" name="id"/></td>
				</tr>
				<tr>
					<td bgcolor="orange">비밀번호</td>
					<td><input type="password" name="password"/></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="login"/>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<hr>
</body>
</html>

HTML 태그들을 이용해서 로그인 화면을 구현했다.

 

 

 

사용자가 아이디와 비밀번호를 입력하는 칸에 값을 입력하고 "login" 버튼을 누르면

각각의 값이 id 와 password 라는 파라미터명에 넣어져서 login_proc.jsp 로 post 방식으로 전송된다.

 

 

우선 로그인화면을 확인해보면,

이렇게 창이 떠야한다.

 

 

 

이때 주소줄을 보면 

localhost:9000/프로젝트명/login.jsp  이런 형식이 아니라 프로젝트명이 와야 할 곳에 biz 가 들어와있다.

이걸 바꿔주기 위해 아래와 같이 해주자 !

 

 

 

sts 의 서버 탭을 보면 현재 실행시켜주는 톰캣 서버가 아래 사진처럼 있다.

이 톰캣 서버를 더블클릭해서 열고, Modules 탭을 눌러보자.

그럼 위에 사진처럼 웹 모듈이 보여지는데, 현재 path 명이 /biz 로 설정되어있다.

저걸 누르면 사진에서처럼 Edit 버튼이 활성화된다. Edit를 눌러주자

이렇게 뜨는데, 윗줄에 써있는 프로젝트명을 복사해서 아래 Path 의 / 뒤에 붙여주자.

이렇게 하고 OK 버튼 누르고

CTRL + S  눌러서 서버 저장해주기!

 

 

그리고나서 login.jsp 를 재구동해보면

이렇게 바뀐다.!

 

 

 

 

( login_proc.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.user.impl.UserDAO"%>
<%@page import="com.heidi.biz.user.UserVO"%>

<%
	// 1. 사용자 입력 정보 추출
	String id = request.getParameter("id");
	String password = request.getParameter("password");
	
	// 2. DB 연동 처리
	UserVO vo = new UserVO();
	vo.setId(id);
	vo.setPassword(password);
	
	UserDAO userDAO = new UserDAO();
	UserVO user = userDAO.getUser(vo);
	
	// 3. 화면 네비게이션
	if (user != null) {
		response.sendRedirect("getBoardList.jsp");
	} else {
		response.sendRedirect("login.jsp");
	}
%>

로그인 처리를 해준 뒤, 화면을 넘겨줄 때 여기서는 리다이렉트(Redirect) 방식을 썼다.

 

 

 

( getBoardList.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="java.util.List" %>
<%@page import="com.heidi.biz.board.impl.BoardDAO"%>
<%@page import="com.heidi.biz.board.BoardVO"%>   

<%
	// 1. 사용자 입력 정보 추출 (검색 기능은  나중에 구현할것임)
	// 2. DB 연동 처리
	BoardVO vo = new BoardVO();
	BoardDAO boardDAO = new BoardDAO();
	List<BoardVO> boardList = boardDAO.getBoardList(vo);
	
	// 3. 응답 화면 구성
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 목록</title>
</head>
<body align="center">

	<h1>글 목록</h1>
	<h3>테스트님 환영합니다...<a href="logout_proc.jsp">Log-out</a></h3>
	
	<!-- 검색 시작 -->
	<form action="getBoardList.jsp" method="post">
		<table border="1" cellpadding="0" cellspacing="0" width="700" align="center">
			<tr>
				<td align="right">
					<select name="searchCondition">
						<option value="TITLE">제목
						<option value="CONTENT">내용
					</select>
					<input type="text" name="searchKeyword"/>
					<input type="text" value="검색"/>
				</td>
			</tr>
		</table>
	</form>
	<!-- 검색 종료 -->
	
	<table border="1" cellpadding="0" cellspacing="0" width="700" align="center">
		<tr>
			<th bgcolor="orange" width="100">번호</th>
			<th bgcolor="orange" width="100">제목</th>
			<th bgcolor="orange" width="100">작성자</th>
			<th bgcolor="orange" width="100">등록일</th>
			<th bgcolor="orange" width="100">조회수</th>
		</tr>
		<% for (BoardVO board : boardList) {%>
		<tr>
			<td><%=board.getSeq() %></td>
			<td align="left">
				<a href="getBoard.jsp?seq=<%=board.getSeq() %>"><%=board.getTitle() %></a>
			</td>
			<td><%=board.getWriter() %></td>
			<td><%=board.getRegDate() %></td>
			<td><%=board.getCnt() %></td>
		</tr>
		<%} %>
	</table>
	
	<br />
	<a href="insertBoard.jsp">새글 등록</a>
	
</body>
</html>

하나 주의할점은,

글 목록을 테이블에 뿌려주는데 글 목록에서 제목을 클릭하면 해당 글 상세보기 화면으로 넘어갈 수 있게 만들어준거!

이 때, 글 상세보기 처리를 위해서 해당 글의 seq 값을 이용할꺼라서

<a href="~" > 태그에  ?seq=<%=board.getSeq() %>  로 값을 같이 넘겨준다.

 

 

 

login.jsp 파일을 실행한 뒤, 로그인 창이 뜨면 DB 에 미리 넣어놨던 유저 정보로 로그인을 해주자.

이렇게 세 개의 유저 정보를 넣어놨는데 아무거로나 로그인해보자.

난 이거로 로그인했다.

 

로그인이 성공하면 게시판의 글 목록이 아래처럼 뜬다.

 

사실 아직 글 등록한게 없어서 아무것도 안뜬다.

 

이제 새글 등록을 만들어주자.

 

 

 

( insertBoard.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 등록</title>
</head>
<body align="center">

	<h1>글 등록</h1>
	<a href="logout_proc.jsp">Log-out</a>
	
	<hr>
	
	<form action="insertBoard_proc.jsp" method="post">
		<table border="1" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td bgcolor="orange" width="70">
					제목
				</td>
				<td align="left">
					<input type="text" name="title"/>
				</td>
			</tr>
			<tr>
				<td bgcolor="orange">작성자</td>
				<td align="left">
					<input type="text" name="writer" size="10"/>
				</td>
			</tr>
			<tr>
				<td bgcolor="orange">내용</td>
				<td align="left">
					<textarea rows="10" cols="40" name="content"></textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="새글 등록"/>
				</td>
			</tr>
		</table>
	</form>
	
	<hr>
	
	<a href="getBoardList.jsp">글 목록으로 이동</a>
	
</body>
</html>

 

 

 

그리고 "새글 등록" 버튼을 누르면 등록 처리를 해줄

insertBoard_proc.jsp 를 생성하자.

 

 

( insertBoard_proc.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.board.impl.BoardDAO"%>
<%@page import="com.heidi.biz.board.BoardVO"%>

<%
	// 1. 사용자 입력 정보 추출
	request.setCharacterEncoding("EUC-KR");
	String title = request.getParameter("title");
	String writer = request.getParameter("writer");
	String content = request.getParameter("content");
	
	// 2. DB 연동 처리
	BoardVO vo = new BoardVO();
	vo.setTitle(title);
	vo.setWriter(writer);
	vo.setContent(content);
	
	BoardDAO boardDAO = new BoardDAO();
	boardDAO.insertBoard(vo);
	
	// 3. 화면 네비게이션
	response.sendRedirect("getBoardList.jsp");
%>

 

 

여기까지 하고, login.jsp 를 실행시켜서 새글 등록을 해주자.

새글 등록을 누르면 

getBoardList.jsp 로 리다이렉트되어 글 목록 화면이 나온다.

이렇게!

 

 

 

이제 글 제목을 누르면 글 상세보기화면이 뜨도록 만들자.

 

 

 

( getBoard.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.board.impl.BoardDAO"%>
<%@page import="com.heidi.biz.board.BoardVO"%>   

<%
	// 1. 검색할 게시글 번호 추출
	String seq = request.getParameter("seq");
	
	// 2. DB 연동 처리
	BoardVO vo = new BoardVO();
	vo.setSeq(Integer.parseInt(seq));
	
	BoardDAO boardDAO = new BoardDAO();
	BoardVO board = boardDAO.getBoard(vo);
	
	// 3. 응답 화면 구성
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세</title>
</head>
<body align="center">

	<h1>글 상세</h1>
	<a href="logout_proc.jsp">Log-out</a>
	
	<hr>
	
	<form action="updateBoard_proc.jsp" method="post">
		<input type="hidden" name="seq" value="<%=board.getSeq() %>"/>
		<table border="1" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td bgcolor="orange" width="70">
					제목
				</td>
				<td align="left">
					<input type="text" name="title" value="<%=board.getTitle() %>"/>
				</td>
			</tr>
			<tr>
				<td bgcolor="orange">작성자</td>
				<td align="left"><%=board.getWriter() %></td>
			</tr>
			<tr>
				<td bgcolor="orange">내용</td>
				<td align="left">
					<textarea rows="10" cols="40" name="content"><%=board.getContent() %></textarea>
				</td>
			</tr>
			<tr>
				<td bgcolor="orange">등록일</td>
				<td align="left"><%=board.getRegDate() %></td>
			</tr>
			<tr>
				<td bgcolor="orange">조회수</td>
				<td align="left"><%=board.getCnt() %></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="글 수정"/>
				</td>
			</tr>
		</table>
	</form>
	
	<hr>
	
	<a href="insertBoard.jsp">글등록</a>&nbsp;&nbsp;&nbsp;
	<a href="deleteBoard_proc.jsp?seq=<%=board.getSeq() %>">글삭제</a>&nbsp;&nbsp;&nbsp;
	<a href="getBoardList.jsp">글목록</a>
	
	
</body>
</html>

 

 

다시 login.jsp 실행해서 글 제목 누르면 상세보기가 잘 뜨나 확인하기,,

이렇게 잘 뜬다,,,

 

 

이제 "글 삭제" 를 누르면 삭제되도록

deleteBoard_proc.jsp 생성하고,

제목 또는 내용을 수정한 뒤 "글 수정" 을 누르면 수정되도록 updateBoard_proc.jsp 도 생성해주기

 

 

 

( deleteBoard_proc.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.board.impl.BoardDAO"%>
<%@page import="com.heidi.biz.board.BoardVO"%>

<%
	//1. 사용자 입력 정보 추출
	String seq = request.getParameter("seq");
	
	// 2. DB 연동 처리
	BoardVO vo = new BoardVO();
	vo.setSeq(Integer.parseInt(seq));
	
	BoardDAO boardDAO = new BoardDAO();
	boardDAO.deleteBoard(vo);
	
	// 3. 화면 네비게이션
	response.sendRedirect("getBoardList.jsp");
%>

 

 

( updateBoard_proc.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.board.impl.BoardDAO"%>
<%@page import="com.heidi.biz.board.BoardVO"%>

<%
	//1. 사용자 입력 정보 추출
	request.setCharacterEncoding("EUC-KR");
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	String seq = request.getParameter("seq");
	
	// 2. DB 연동 처리
	BoardVO vo = new BoardVO();
	vo.setTitle(title);
	vo.setContent(content);
	vo.setSeq(Integer.parseInt(seq));
	
	BoardDAO boardDAO = new BoardDAO();
	boardDAO.updateBoard(vo);
	
	// 3. 화면 네비게이션
	response.sendRedirect("getBoardList.jsp");
%>

 

 

 

마지막으로 로그아웃을 누르면 로그아웃되고 메인화면인 login.jsp 로 이동하도록 하기 위해서

logout_proc.jsp 를 생성해준다.

 

 

( logout_proc.jsp )

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.heidi.biz.user.impl.UserDAO"%>
<%@page import="com.heidi.biz.user.UserVO"%>

<%
	// 1. 브라우저와 연결된 세션 객체를 강제 종료한다.
	session.invalidate();
	
	// 2. 세션 종료 후, 메인 화면으로 이동한다. (로그인 페이지로 이동)
	response.sendRedirect("login.jsp");
%>

 

 

 

현재까지의 프로젝트 구조

 

 

반응형

'Java . Spring . Web . SQL' 카테고리의 다른 글

파일 업로드, 예외처리 (어노테이션 방식, XML 방식)  (0) 2020.10.22
[Model 2] Model 2 아키텍처로 게시판 개발  (0) 2020.10.21
스프링 JDBC  (0) 2020.10.20
어노테이션 기반 MVC 개발  (0) 2020.10.20
[AOP] 어노테이션 기반 AOP  (0) 2020.10.19

관련글

댓글

티스토리툴바