본문 바로가기

Dev/[Java]

[DBMS] 9. Web 붙이기, Servlet / JSP - 직접해보기

반응형

자 이제 어제 새로 나혼자 만들어보았던.. 메이븐 기반 마이바티스 프로젝트에 

JSP와 Servlet 을 붙여볼것이다...

 

1. controller(Servlet)을 생성한다...

 

 

 

2. @WebServlet("/bookServlet") 어노테이션을 없애고, web.xml에 작성한다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
	id="WebApp_ID" version="4.0">
	<display-name>Dynamic_Web_CCS1_Bookstore</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<!-- Servlet 선언 -->
	<servlet>
		<servlet-name>bookServlet</servlet-name>
		<servlet-class>jdbc.book.controller.bookServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>bookServlet</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
	
</web-app>

 

3. 서블릿 코드의 초안을 작성해준다.

(1) 클래스 상위단에 DAO객체 선언하기.

(2) init 메서드 호출해서 객체 생성해주기.

private static final long serialVersionUID = 1L;
    BookDAO dao = null;   
    /**
     * @see HttpServlet#HttpServlet()
     */
    public bookServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    
    @Override
    public void init() throws ServletException {
    	System.out.println("bookServlet Init()");
    	dao = new BookDAO();
    }

 

 

4. index.jsp, booklist.jsp, bookDetail.jsp 3가지 파일 생성해보기..

(1)index.jsp

- 여기서는 우선 기본 틀을 만들어주고.. a태그의 링크로.. *.do?cmd=bookList라는.. 커맨드를 같이 날려준다..

그럼 이걸 Servlet 의 doGet 에서 받겠지? doGet 에서 cmd 가 bookList 로 넘어오는 것을 찾아보자..

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 도서 관리 시스템 </title>
</head>
<body>
	<h1> 도서 관리 </h1>
	<ul>
		<li><a href="a.do?cmd=bookList">1.도서 목록</a></li>
	</ul>
</body>
</html>

서블릿으로 가서 작성..

이렇게 작성하면 된다.. 그러니까

(1). Query String 추출 : 이거는 아까 JSP쪽에서 cmd로 날려준 저거.. 저기 쿼리스트링이라고한다.

(2) dao메서드 호출 : select 던 insert던 delete던,, 해당 dao에 있는 메서드를 용도에 맞게 호출하면된다.

(3) RequestDispatcher의 Forward()메서드 호출해서.. 목적지로 던져준다.. 이 때.. 해당 jsp파일명이 /와 함께 String으로 들어가야한다...

 

여기서 중요한건.. (2)에서 설명했듯이 각자의 용도에 맞는 소스코드들이 들어가다보면 doGet메서드가 지저분해질 수 있다. 결국 포워딩할 때 필요한건 해당 Jsp파일의 파일명이기 때문에.. (2)번을 따로 메서드화 시켜준다..

 

그리고 나서 doGet 에서는 ... cmd(쿼리스트링) 에 맞기 다양한 용도의 메서드를 실행해야하기때문에.. cmd로 분기한다.

 

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// 1. Query String 추출..
	String cmd = request.getParameter("cmd");

	// 2. dao 메서드 호출.. select * from books이다...
	List<BookVO> books = dao.getBookList();

	//3. RequestDispatcher 의 forward() 메서드 호출해서 bookList.jsp로 포워딩한다.
	RequestDispatcher rd = request.getRequestDispatcher("/bookList.jsp");
	rd.forward(request, response);

}

 

메서드화 시킨 결과...

 

/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1. Query String 추출..
		String cmd = request.getParameter("cmd");
		
		String jspPageName = "";
		if(cmd.contentEquals("bookList")) {
			jspPageName = bookList(request);
		}
		
		//3. RequestDispatcher 의 forward() 메서드 호출해서 bookList.jsp로 포워딩한다.
		RequestDispatcher rd = request.getRequestDispatcher(jspPageName);
		rd.forward(request, response);

	}

	private String bookList(HttpServletRequest request) {
		
		// 2. dao 메서드 호출.. select * from books이다...
		List<BookVO> books = dao.getBookList();
		
		// 2. List객체를 Request 객체에 저장한다.
		request.setAttribute("books", books);
		
		return "/bookList";
	}
	

 

자.. 다시 JSP단으로 넘어가야한다..

bookLIst.jsp를 만들어주자.

 

포인트 1

여기선 <%@ taglib prefix="c" 이걸 꼭 해줘야댄다.. 그래야지 foreach문이돈다..

 

포인트 2

서블릿에서 

request.setAttribute("att_books", books);

여기서 Set시킨 이름이 att_books면..(앞에 파라미터..)

foreach문의 items에 달러 표시안에 도 꼭 att_books로 맞춰줘야한다..

지금은 그냥 books books로 맞춰주었따..

 

포인트 3

<td> 두번째 것 보면.. 또 쿼리스트링으로 넘겨주었다...

이걸 통해서 다시 서블릿으로 가서.. 해당 도서의 세부 정보를 가져와 bookDetail.jsp에 뿌려줄것이다..

넘기는 방법을 다시 잘 보자. ID는 동적으로 넘겨준다...JSTL 쓴것도 잘 보자..

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 도서 목록 시스템 </title>
</head>
<body>
	<h2>도서 목록</h2>
	<table>
		<tr>
			<th>순서</th>
			<th>사용자ID</th>
			<th>이름</th>
		</tr>
		<c:forEach var="book" items="${books}" varStatus="status">
			<tr>
				<td>${status.count}</td>
				<td><a href = "bookDetail.do?cmd=bookDetail&bookid=${book.bookid}">${book.bookid}</a></td>
				<td>${book.bookname}</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

 

 

여기까지 하면 결과가 잘 나올것이다....

 

자 다시 서블릿 단으로 가서 bookDetail.jsp을 만들자..

포인트1

doGet 에 분기문 하낙 추가된 것을 볼 수 잇고, book Detail 메서드로 가보면

String bookid = request.getParameter("bookid"); 

이렇게 한번 더 쿼리스트링을 받아오는 것을 볼 수 있다.

그 쿼리스트링은 ID이다. 이 ID를 넣어서 DAO객체에서 해당 도서 1권의 세부 정보를 받아올것이다..

 

포인트2

그리고 나서 Setattribute를 통해서 또 다시 bookOne이라는 변수에 매칭시켜준다..

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1. Query String 추출..
		String cmd = request.getParameter("cmd");
		
		String jspPageName = "";
		if(cmd.contentEquals("bookList")) {
			jspPageName = bookList(request,response);
		} else if (cmd.contentEquals("bookDetail")) {
			jspPageName = bookDetail(request, response);
		}
		
		//3. RequestDispatcher 의 forward() 메서드 호출해서 bookList.jsp로 포워딩한다.
		RequestDispatcher rd = request.getRequestDispatcher(jspPageName);
		rd.forward(request, response);

	}
	
	private String bookDetail(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException  {
		
		// 1. queryString 추출
		String bookid = request.getParameter("bookid");

		// 2. DAO의 메서드 호출
		BookVO book = dao.getBook(bookid);
		
		// 3. 조회한 1명의 객체를 Request 객체에 저장한다.
		request.setAttribute("bookOne", book);
		
		
		return "bookDetail.jsp";
	}

 

bookDetail의 소스코드...

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도서 상세</title>
</head>
<body>
	<h2>도서 상세정보</h2>
	<table>
		<tr>
			<th>ID</th>
			<td>${bookOne.id}</td>
		</tr>
		<tr>
			<th>도서 ID :</th>
			<td>${bookOne.bookid}</td>
		</tr>
		<tr>
			<th>도서 이름 :</th>
			<td>${bookOne.bookname}</td>
		</tr>
		<tr>
			<th>작가 :</th>
			<td>${bookOne.author}</td>
		</tr>
		<tr>
			<th>장르 :</th>
			<td>${bookOne.genre}</td>
		</tr>
		<tr>
			<th>입고일자 :</th>
			<td><fmt:formatDate value="${bookOne.regdate}"
					pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>

			<!-- <td>${userOne.regdate}</td> -->
		</tr>
	</table>
	<hr>
	<%-- JSP떄는 이렇게 썼따.--%>
	<%--<a href="<%=request.getContextPath()%>/index.jsp">Home</a> --%>
	<a href="${pageContext.request.contextPath}/index.jsp">Home</a>


</body>
</html>

 

Insert까지만 하자..

 

서블릿 단으로 가서 Insert를 만들자..

특이사항으로는 분기문을 2개 만들어줘야댄다. 

그 이유는 Insert하는 Form 하나. 그리고 그걸 처리해주는 것 하나. 이렇게..

좀 복잡해도 쉬운 내용이다..

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		// 1. Query String 추출..
		String cmd = request.getParameter("cmd");
		
		String jspPageName = "";
		if(cmd.contentEquals("bookList")) {
			jspPageName = bookList(request,response);
		} else if (cmd.contentEquals("bookDetail")) {
			jspPageName = bookDetail(request, response);
		} else if(cmd.contentEquals("bookInsertForm")) {
			jspPageName = "bookInsert.jsp";
		} else if(cmd.contentEquals("bookInsert")) {
			jspPageName = bookInsert(request, response);
		}
		
		//3. RequestDispatcher 의 forward() 메서드 호출해서 bookList.jsp로 포워딩한다.
		RequestDispatcher rd = request.getRequestDispatcher(jspPageName);
		rd.forward(request, response);

	}
	
	private String bookInsert(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException  {
		// form data 추출해서 BookVO 저장
		BookVO book = new BookVO(
				request.getParameter("bookid"),
				request.getParameter("bookname"),
				request.getParameter("author"),
				request.getParameter("genre")
				);
		
		//2. BookDAO Method 호출
		int cnt = dao.insertBook(book);
		
		if(cnt==1) {
			return bookList(request,response);
		}
		else {
			return "";
		}
	}

 

자 다음 이걸 호출할 곳은... index.jsp이다..

이걸 다시 건드리자..

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 도서 관리 시스템 </title>
</head>
<body>
	<h1> 도서 관리 </h1>
	<ul>
		<li><a href="bookList.do?cmd=bookList">1.도서 목록</a></li>
		<!-- 여기선 form을 뿌려준다.. -->
		<li><a href="bookInsert.do?cmd=bookInsertForm">2.도서 등록</a></li>
	
	</ul>
</body>
</html>

 

 

그리고 이제 Form 을 만들어서 submit 해준다.

 

bookInsert.jsp이다..

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도서 등록</title>
</head>
<body>
<h2>도서 등록</h2>
	<form method="post" action="bookInsert.do">
		<input type="hidden" name="cmd" value="bookInsert">
		<table>
			<tr>
				<th>도서 ID :</th>
				<td><input type="text" name="bookid"></td>
			</tr>
			<tr>
				<th>도서 이름 :</th>
				<td><input type="text" name="bookname"></td>
			</tr>
			<tr>
				<th>작가 :</th>
				<td><input type="radio" name="author" value="김씨">김씨 <input
					type="radio" name="author" value="이씨">이씨</td>
			</tr>
			<tr>
				<th>장르 :</th>
				<td>
					<select name="genre">
							<option value="재테크">재테크</option>
							<option value="생활">생활</option>
							<option value="공포">공포</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type = "submit" value="등록">
				</td>
			</tr>
		</table>
	</form>

</body>
</html>

잘 동작한다..

 

반응형