Transcript ch13 설계 모델과 웹 템플릿

설계 모델과 웹 템플릿
뇌를 자극하는 JSP & Servlet
Contents
 학습목표
 이번 장에서는 개발 작업의 효율성과 유지관리의 용이성을 위해 필요한
설계 모델과 웹 템플릿에 대해 알아보자.
 내용
 설계 모델과 웹 템플릿에 대하여
 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 웹 템플릿으로 일관된 사용자 인터페이스 만들기
2/69
1. 설계 모델과 웹 템플릿에 대하여
 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2
 JSP 규격서의 초기 버전에서 소개하고 있는 설계 모델(design model)인 모델 1과 모델 2
는 웹 애플리케이션이 해야 할 일을 다음 세가지로 구분하여 모듈화하는 방법을 제시하
고 있다.
• 데이터 입력
• 데이터 처리
• 데이터 출력
 모델 1은 비교적 간단한 웹 애플리케이션에 적합한 설계 모델이고, 모델 2는 비교적 복
잡한 웹 애플리케이션에 적합한 설계 모델이다.
3/75
1. 설계 모델과 웹 템플릿에 대하여
 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2
 모델 1은 웹 애플리케이션을 두 종류의 모듈로 나누어 각각 JSP 페이지와 자바빈 클래스
로 구현하도록 제안한다.
• JSP 페이지는 데이터의 입력과 출력을 담당한다.
• 자바빈 클래스는 데이터 처리를 담당한다.
4/75
1. 설계 모델과 웹 템플릿에 대하여
 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2
 모델 2는 웹 애플리케이션을 세 종류의 모듈로 나누어서 각각 서블릿 클래스, JSP 페이
지, 자바빈 클래스로 구현하도록 제안하고 있다.
• 서블릿 클래스는 데이터 입력과 데이터 처리를 담당한다.
• JSP 페이지는 데이터 출력을 담당한다.
• 자바빈 클래스는 서블릿 클래스가 JSP 페이지로 넘겨주는 데이터를 포장하는 일만 한다.
5/75
1. 설계 모델과 웹 템플릿에 대하여
 사용자 인터페이스에 일관성을 부여하는 웹 템플릿
 웹 사이트 외관의 일관성을 위해서는 여러 웹 페이지들 간에 공통되는 부분의 코드를 추
출해서 단일 파일로 유지하는 것이 좋다. 이런 파일을 웹 템플릿(web template)이라고 부
른다.
 웹 템플릿은 HTML과 JSP의 문법을 이용해서 작성할 수 있고, 웹 페이지마다 달라져야
하는 부분은 <jsp:include> 표준 액션을 이용해서 외부 파일로부터 불러오면 된다.
6/75
1. 설계 모델과 웹 템플릿에 대하여
 사용자 인터페이스에 일관성을 부여하는 웹 템플릿
7/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
 다음과 같이 작동하는 애플리케이션을 모델 1을 이용해서 작성해보자.
① URL과 함께 게시글의
순번을 입력하면
[그림 13-4] 게시글 읽기 애플리케이션의 작동 방식
② 데이터베이스에 있는
게시글의 내용이 출력됩니
다.
 위 애플리케이션은 다음과 같은 일을 해야 한다.
• 데이터 입력 - 웹 브라우저로부터 입력된 게시글의 순번을 받는다.
• 데이터 처리 - 그에 해당하는 게시글을 데이터베이스로부터 읽는다.
• 데이터 출력 - 그 결과를 HTML 코드로 만들어서 웹 브라우저로 출력한다.
8/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
 모델 1에 따라 앞의 애플리케이션을 모듈화하면 다음과 같다.
 위 두 모듈의 코딩에 들어가기에 앞서 이 애플리케이션의 실행에 필요한 게시판 테이블
을 다음과 같이 설계하자.
테이블 이름: 게시판 테이블 (bbs)
한글 항목명
영문 항목명
타입
크기
순번
seqno
integer
8
제목
title
varchar
50
내용
content
varchar
500
작성자
writer
varchar
20
저장일자
wdate
date
3
저장시각
wtime
time
3
9/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
[예제 13-1] 데이터베이스로부터 게시글을 읽는 자바빈 클래스
package web;
import java.io.*;
import java.sql.*;
import javax.servlet.*;
public class BBSItem {
private int seqNo;
// 순번
private String title;
// 제목
private String content;
// 내용
private String writer;
// 작성자
private Date date;
// 저장일자
private Time time;
// 저장시각
public BBSItem() {
}
public void setSeqNo(int seqNo) {
this.seqNo = seqNo;
}
public String getTitle() {
return toUnicode(title);
}
public String getContent() {
return toUnicode(content);
}
public String getWriter() {
return toUnicode(writer);
}
public Date getDate() {
return date;
}
public Time getTime() {
return time;
}
// 데이터베이스로부터 게시글을 읽는 메서드
public void readDB() throws ServletException {
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver ”);
conn = DriverManager.getConnection(
“jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception(
“데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(
“select * from bbs where seqNo = ‘” + seqNo + “’; ”);
if (rs.next()) {
title = rs.getString( “title ”);
// 제목
content = rs.getString( “content ”); // 내용
writer = rs.getString( “writer ”);
// 작성자
date = rs.getDate( “wdate ”);
// 저장일자
time = rs.getTime( “wtime ”);
// 저장시각
}
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
10/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
try {
conn.close();
}
catch (Exception ignored) {
}
}
}
// ISO-8859-1 문자열을 Unicode 문자열로 바꾸는 메서드
private String toUnicode(String str) {
if (str == null)
return null;
try {
byte[] b = str.getBytes( “ISO-8859-1 ”);
return new String(b);
}
catch (java.io.UnsupportedEncodingException uee) {
System.out.println(uee.getMessage());
return null;
}
}
}
11/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
[예제 13-2] 게시글을 출력하는 JSP 페이지 - 스크립팅 요소를 사용한 경우
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@page import= “web.BBSItem ”%>
<%
int seqNo = Integer.parseInt(request.getParameter( “SEQ_NO ”));
BBSItem bbsItem = new BBSItem();
bbsItem.setSeqNo(seqNo);
bbsItem.readDB();
%>
<HTML>
<HEAD><TITLE>게시글 읽기</TITLE></HEAD>
<BODY>
<H4>게시글 읽기</H4>
[제목] <%= bbsItem.getTitle() %> <BR>
[작성자] <%= bbsItem.getWriter() %>
[작성일시] <%= bbsItem.getDate() %> <%= bbsItem.getTime() %> <BR>
----------------------------------------------------- <BR>
<%= bbsItem.getContent() %>
</BODY>
</HTML>
12/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
[예제 13-3] 게시글을 출력하는 JSP 페이지 - 표준 액션을 사용한 경우
<%@page contentType= “text/html; charset=euc-kr ”%>
<jsp:useBean id= “bbsItem ” class= “web.BBSItem ” />
<jsp:setProperty name= “bbsItem ” property= “seqNo ” value= “${param.SEQ_NO} ” />
<% bbsItem.readDB(); %>
<HTML>
<HEAD><TITLE>게시글 읽기</TITLE></HEAD>
<BODY>
<H4>게시글 읽기</H4>
[제목] <jsp:getProperty name= “bbsItem ” property= “title ” /> <BR>
[작성자] <jsp:getProperty name= “bbsItem ” property= “writer ” />
[작성일시] <jsp:getProperty name= “bbsItem ” property= “date ” />
<jsp:getProperty name= “bbsItem ” property= “time ” /> <BR>
----------------------------------------------------- <BR>
<jsp:getProperty name= “bbsItem ” property= “content ” />
</BODY>
</HTML>
13/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
[예제 13-4] 게시글을 출력하는 JSP 페이지 - 익스프레션 언어를 사용한 경우
<%@page contentType= “text/html; charset=euc-kr ”%>
<jsp:useBean id= “bbsItem ” class= “web.BBSItem ” />
<jsp:setProperty name= “bbsItem ” property= “seqNo ” value= “${param.SEQ_NO} ” />
<% bbsItem.readDB(); %>
<HTML>
<HEAD><TITLE>게시글 읽기</TITLE></HEAD>
<BODY>
<H4>게시글 읽기</H4>
[제목] ${bbsItem.title} <BR>
[작성자] ${bbsItem.writer}
[작성일시] ${bbsItem.date} ${bbsItem.time} <BR>
----------------------------------------------------- <BR>
${bbsItem.content}
</BODY>
</HTML>
14/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
15/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
 애플리케이션을 실행하기 전에 마지막으로 해야 할 일은 사용하고 있는 JDBC API와 데
이터베이스 커넥션 풀을 위한 환경 설정이다.
16/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 1으로 웹 애플리케이션 설계하고 구현하기
[그림 13-9] 예제 13-1, 예제 13-4의 실행 결과
17/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
 다음과 같이 작동하는 애플리케이션을 모델 1을 이용해서 작성해보자.
18/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
 앞의 그림처럼 작동하는 애플리케이션을 모델 2로 설계하면 다음과 같다.
19/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2에서는 자바빈 클래스에 데이터를 처리하는 복잡한 로직이 포함되지 않으므로 생
성자와 get-메서드, set-메서드만 있으면 된다.
 하나의 자바빈에 똑같은 이름의 프로퍼티가 여러 개를 있을 경우에는 set-메서드의 첫
번째 파라미터로 인덱스 값을 받도록 만들거나, 모든 프로퍼티 값을 포함한 배열을 파라
미터로 넘겨주는 방법을 사용해야 한다.
public class Lotto {
private byte number[] = new byte[5];
public void setNumber(int index, byte number) {
this.number[index] = number;
}
}
public class Lotto {
private byte number[] = new byte[5];
public void setNumber(byte number[]) {
this.number = number;
}
}
20/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
 get-메서드의 작성 방법도 두 가지 인데 하나는 인덱스 값을 파라미터로 받는 방법이고,
다른 하나는 모든 프로퍼티 값이 들어 있는 배열을 통째로 리턴하는 방법이다.
public class Lotto {
private byte number[] = new byte[5];
public byte getNumber(int index) {
return number[index];
}
}
public class Lotto {
private byte number[] = new byte[5];
public byte[] getNumber() {
return number;
}
}
21/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
[예제 13-5] 게시글 목록 데이터를 표현하는 자바빈 클래스
package web;
import java.io.*;
import java.sql.*;
import java.util.ArrayList;
public class BBSList {
private ArrayList<Integer> seqNoList = new ArrayList<Integer>(); // 순번
private ArrayList<String> titleList = new ArrayList<String>();
// 제목
private ArrayList<String> writerList = new ArrayList<String>();
// 작성자
private ArrayList<Date> dateList = new ArrayList<Date>();
// 저장일자
private ArrayList<Time> timeList = new ArrayList<Time>();
// 저장시각
private boolean lastPage = false;
// 게시글 목록의 마지막 페이지인지 여부
public BBSList() {
}
public void setSeqNo(int index, Integer seqNo) {
this.seqNoList.add(index, seqNo);
}
public void setTitle(int index, String title) {
this.titleList.add(index, title);
}
public void setWriter(int index, String writer) {
this.writerList.add(index, writer);
}
public void setDate(int index, Date date) {
this.dateList.add(index, date);
}
public void setTime(int index, Time time) {
this.timeList.add(index, time);
}
public void setLastPage(boolean lastPage) {
this.lastPage = lastPage;
}
public Integer[] getSeqNo() {
return seqNoList.toArray(new Integer[seqNoList.size()]);
}
public String[] getTitle() {
return titleList.toArray(new String[titleList.size()]);
}
public String[] getWriter() {
return writerList.toArray(new String[writerList.size()]);
}
public Date[] getDate() {
return dateList.toArray(new Date[dateList.size()]);
}
public Time[] getTime() {
return timeList.toArray(new Time[timeList.size()]);
}
public boolean isLastPage() {
return lastPage;
}
public int getListSize() { // 게시글의 수를 리턴하는 메서드
return seqNoList.size();
}
}
22/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
[예제 13-6] 데이터베이스로부터 게시글 정보를 읽어서 게시글 목록을 만드는 서블
릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class BBSListServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String strUpperSeqNo = request.getParameter( “LAST_SEQ_NO ”);
int upperSeqNo;
if (strUpperSeqNo == null)
upperSeqNo = Integer.MAX_VALUE;
else
upperSeqNo = Integer.parseInt(strUpperSeqNo);
BBSList list = readDB(upperSeqNo);
request.setAttribute( “BBS_LIST ”, list);
RequestDispatcher dispatcher = request.getRequestDispatcher(“BBSListView.jsp ”);
dispatcher.forward(request, response);
}
// 데이터베이스로부터 게시글 목록을 읽는 메서드
private BBSList readDB(int upperSeqNo) throws ServletException {
BBSList list = new BBSList();
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver ”);
conn = DriverManager.getConnection( “jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception( “데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery( “select * from bbs where seqNo < ” +
upperSeqNo + “ order by seqno desc; ”);
for (int cnt = 0; cnt < 5; cnt++) {
if (!rs.next())
break;
list.setSeqNo(cnt, rs.getInt( “seqNo ”));
list.setTitle(cnt, toUnicode(
rs.getString( “title ”)));
list.setWriter(cnt, toUnicode(
rs.getString( “writer ”)));
list.setDate(cnt, rs.getDate( “wdate ”));
list.setTime(cnt, rs.getTime( “wtime ”));
}
if (!rs.next())
list.setLastPage(true);
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
try {
conn.close();
}
catch (Exception ignored) {
}
}
return list;
}
23/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
// ISO-8859-1 문자열을 Unicode 문자열로 바꾸는 메서드
private String toUnicode(String str) {
if (str == null)
return null;
try {
byte[] b = str.getBytes(“ISO-8859-1”);
return new String(b);
}
catch (java.io.UnsupportedEncodingException uee) {
System.out.println(uee.getMessage());
return null;
}
}
}
24/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
[예제 13-7] 게시글 목록을 출력하는 JSP 페이지 - EL 식과 JSTL 라이브러리 사용
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<HTML>
<HEAD><TITLE>게시판</TITLE></HEAD>
<BODY>
<H4>게시판 목록 보기</H4>
<TABLE border=1>
<TR>
<TD width=40>순번</TD>
<TD width=300>제목</TD>
<TD width=80>작성자</TD>
<TD width=90>작성일자</TD>
<TD width=70>작성시각</TD>
</TR>
<c:forEach var= “cnt ” begin= “0 ” end= “${BBS_LIST.listSize - 1} ”>
<TR>
<TD>${BBS_LIST.seqNo[cnt]}</TD>
<TD>${BBS_LIST.title[cnt]}</TD>
<TD>${BBS_LIST.writer[cnt]}</TD>
<TD>${BBS_LIST.date[cnt]}</TD>
<TD>${BBS_LIST.time[cnt]}</TD>
</TR>
</c:forEach>
</TABLE>
<c:if test= “${!BBS_LIST.lastPage} ”>
<A href= ‘bbs-list?LAST_SEQ_NO=${BBS_LIST.seqNo[BBS_LIST.listSize - 1]} ’>다음 페이지</A>
</c:if>
</BODY>
</HTML>
25/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
 모델 2로 웹 애플리케이션 설계하고 구현하기
[그림 13-13] 예제 13-6의 서블릿 클래스
를 등록하는 방법
26/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
[그림 13-15] 게시글 목록 보기 애플리케이션의 테스트를 위한 데이터 입력 방법
27/75
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
28/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿 만들기
 웹 템플릿을 만들기 위해 가장 먼저 해야 할 일은 웹 사이트를 구성하는 웹 페이지들의
공통부분을 추출해내는 것이다.
29/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿 만들기
 특별한 경우가 아니라면, 중앙의 가장 넓은 부분을 제외한 위쪽, 왼쪽, 오른쪽, 아래쪽에
공통 부분이 위치하는 것이 보통이다.
머리
부
좌측 메
뉴
몸체
꼬리
부
[그림 13-18] 웹 템플릿의 구성 요소
30/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿 만들기
[예제 13-8] 웹 템플릿의 예
[예제 13-9] 회사 소개 웹 페이지의 몸체 부분
<%@page contentType= “text/html; charset=euc-kr ” %>
<HTML>
<HEAD>
<TITLE>한빛미디어</TITLE>
</HEAD>
<BODY>
<H1>한빛미디어</H1>
<TABLE border=1 cellpadding=10>
<TR>
<TD width=150 valign=top>
<A HREF= “Intro.html ”>회사 소개</A><BR>
<A HREF= “books-info ”>책 정보</A><BR>
<A HREF= “BBSInput.html ”>게시판 글쓰기</A><BR>
<A HREF= “bbs-list ”>게시판 글읽기</A><BR>
</TD>
<TD valign=top width=650>
<jsp:include page= “${param.BODY_PATH} ” />
</TD>
</TR>
</TABLE>
<H5>Copyright@ 1993-2010 한빛미디어(주)</H5>
</BODY>
</HTML>
<H4>회사 소개</H4>
한빛미디어(주)는 지난 15년 동안 국내 컴퓨터/정보통신 분야
의 성장과 더불어 IT 전문가들의 풍부한 실무 경험과 현장 노
하우를 책으로 출간하면서 해당 분야의 IT 개발자들과 함께 발
전해 왔습니다.
[그림 13-19] 웹 템플릿을 통해 출력한 회사 소개 웹 페이지
31/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿 만들기
[예제 13-10] 게시판 글쓰기 입력 화면의 몸체 부분
<H4>게시판 글쓰기</H4>
<FORM ACTION=/brain13/bbs-post METHOD=POST>
제목: <INPUT TYPE=TEXT NAME=TITLE><BR>
<TEXTAREA COLS=80 ROWS=5 NAME=CONTENT></TEXTAREA><BR>
<INPUT TYPE=SUBMIT VALUE= ‘저장 ’>
<INPUT TYPE=RESET VALUE= ‘취소 ’>
</FORM>
[그림 13-20] 웹 템플릿을 통해 출력한 게시판 글쓰기 웹 페이지
32/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
 앞에서처럼 <jsp:include>액션을 이용해서 웹 템플릿에 몸체 부분을 포함시키는 방법은,
웹 애플리케이션의 실행 결과를 출력할 때는 통하지 않을 수도 있다.
 게시판 읽기 애플리케이션의 경우에는 이 방법으로 올바른 결과를 얻을 수 있다.
33/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
 하지만 게시글 목록 보기 애플리케이션에 대해 똑같은 방법을 사용하면 다음과 같은 웹
템플릿 없이 결과가 나타난다.
34/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
 앞 페이지의 문제를 해결하려면 게시글 목록 보기 애플리케이션의 데이터 처리 로직과
데이터 출력 로직 사이에서 웹 템플릿이 실행되도록 만들면 된다.
 게시글 목록 보기 애플리케이션은 모델 2로 작성되었기 때문에 이미 데이터 처리 로직
과 데이터 출력 로직으로 나누어서 모듈화되어 있다. 그러므로 [예제 13-6]의 서블릿
클래스 16행을 다음과 같이 수정하면 위 그림과 같이 작동하게 된다.
35/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
 수정된 게시글 목록 보기 애플리케이션은 다음과 같이 올바르게 작동한다.
1) [예제 13-6]의 URL을
입력하십시오.
2) 게시글 목록이
웹 템플릿을 통
해
출력될 것입니
다.
[그림 13-24] 웹 템플릿을 통해 출력한 게시판 목록
36/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
[예제 13-11] 게시글 목록을 출력하는 JSP 페이지 - 게시글 읽기 애플리케이션에 대한 링크가 추가된 버전
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<H4>게시판 목록 보기</H4>
<TABLE border=1>
<TR>
<TD width=40>순번</TD>
<TD width=300>제목</TD>
<TD width=80>작성자</TD>
<TD width=90>작성일자</TD>
<TD width=70>작성시각</TD>
</TR>
<c:forEach var= “cnt ” begin= “0 ” end= “${BBS_LIST.listSize - 1} ”>
<TR>
<TD>${BBS_LIST.seqNo[cnt]}</TD>
<TD><A href= ‘WebTemplate.jsp?BODY_PATH=BBSItemView.jsp?SEQ_NO=${BBS_LIST.seqNo[cnt]} ’>${BBS_LIST.title[cnt]}</A></TD>
<TD>${BBS_LIST.writer[cnt]}</TD>
<TD>${BBS_LIST.date[cnt]}</TD>
<TD>${BBS_LIST.time[cnt]}</TD>
</TR>
</c:forEach>
</TABLE>
<c:if test= “${!BBS_LIST.lastPage} ”>
<A href= ‘bbs-list?LAST_SEQ_NO=${BBS_LIST.seqNo[BBS_LIST.listSize - 1]} ’>다음 페이지</A>
</c:if>
[예제 13-12] 게시글 내용을 출력하는 JSP 페이지 - 웹 템플릿에 적합한 버전
<%@page contentType= “text/html; charset=euc-kr ”%>
<jsp:useBean id= “bbsItem ” class= “web.BBSItem ” />
<jsp:setProperty name= “bbsItem ” property= “seqNo ” value= “${param.SEQ_NO} ” />
<% bbsItem.readDB(); %>
<H4>게시글 읽기</H4>
[제목] ${bbsItem.title} <BR>
[작성자] ${bbsItem.writer}
[작성일시] ${bbsItem.date} ${bbsItem.time} <BR>
------------------------------------------------------------ <BR>
${bbsItem.content}
37/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
38/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
 이번에는 다음과 같이 작동하는 애플리케이션을 작성해보자.
39/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
 로그인 입력 화면은 다음과 같은 HTML 문서로 구현할 수 있다.
[예제 13-13] 로그인 정보를 입력받는 HTML 문서
<H4>로그인</H4>
<FORM ACTION=login METHOD=POST>
아이디: <INPUT TYPE=TEXT NAME=ID SIZE=12> <BR>
패스워드: <INPUT TYPE=PASSWORD NAME=PASSWORD SIZE=12> <BR>
<INPUT TYPE=SUBMIT VALUE= ‘로그인 ’>
</FORM>
40/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
 로그인 버튼을 눌렀을 때 호출되는 로그인 애플리케이션은 다음과 같은 일을 해야 한다.
• 데이터 입력 : 아이디와 패스워드를 입력 받는다.
• 데이터 처리 : 입력 아이디에 해당하는 패스워드를 데이터베이스로부터 읽어서 입력된 패스워드
와 비교한다. 두 값이 동일하면 세션 데이터 영역에 로그인 상태를 저장한다.
• 데이터 출력 : 로그인에 성공하면 그림 13-26의 아래 왼쪽에 있는 메시지를, 실패하면 오른쪽에
있는 메시지를 출력한다.
 로그인 결과가 웹 템플릿 안에 나타나도록 만들기 위해서 모듈의 실행 순서를 다음과 같
이 배치해야 한다.
41/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
[예제 13-14] 로그인 처리를 하는 서블릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class LoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String id = request.getParameter( “ID ”);
String password = request.getParameter( “PASSWORD ”);
String result;
if (checkLoginInfo(id, password)) {
HttpSession session = request.getSession();
session.setAttribute( “LOGIN_ID ”, id);
result = “SUCCESS ”;
}
else {
result = “FAIL ”;
}
response.sendRedirect( “WebTemplate.jsp?BODY_PATH= ” +
“LoginResult.jsp?LOGIN_RESULT= ” + result);
}
// 로그인 체크 메서드
private boolean checkLoginInfo(String id, String password) throws ServletException {
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver ”);
conn = DriverManager.getConnection( “jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception( “데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery( “select password from userinfo where id = ‘” + id + “’; ”);
if (!rs.next())
return false;
String correctPassword = rs.getString( “password ”);
if (password.equals(correctPassword))
return true;
else
return false;
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
try {
conn.close();
}
catch (Exception ignored) {
}
}
}
}
42/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
[예제 13-15] 로그인 결과를 출력하는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<H4>로그인</H4>
<c:choose>
<c:when test= “${param.LOGIN_RESULT == ‘SUCCESS ’} ”>
로그인이 되었습니다. <BR>
안녕하세요 ${sessionScope.LOGIN_ID}님.
</c:when>
<c:otherwise>
로그인에 실패했습니다. <BR>
아이디와 패스워드를 체크하세요.
</c:otherwise>
</c:choose>
43/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
mysql.exe 프로그램
을
이용해서 webdb
데이터베이스로
들어가세요
userinfo 테이블에 데이
터를
입력하세요
[그림 13-29] 로그인 애플리케이션의 실행에 필요한 데이터 입력 방법
44/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
45/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
 로그아웃 애플리케이션의 구성도는 다음과 같다.
[예제 13-16] 로그아웃 처리를 하는 서블릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
public class LogoutServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
HttpSession session = request.getSession();
session.removeAttribute( “LOGIN_ID ”);
response.sendRedirect( “WebTemplate.jsp?BODY_PATH=LogoutResult.jsp?LOGOUT_RESULT=SUCCESS ”);
}
}
[예제 13-17] 로그아웃 결과를 출력하는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<H4>로그아웃</H4>
<c:choose>
<c:when test= “${param.LOGOUT_RESULT == ‘SUCCESS ’} ”>
로그아웃이 되었습니다. <BR>
</c:when>
<c:otherwise>
로그아웃에 실패했습니다. <BR>
</c:otherwise>
</c:choose>
46/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
47/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
[그림 13-33] 예제 13-16, 예제 13-17의 실행 결과
48/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
 이번에는 웹 템플릿의 좌측 메뉴가 다음과 같이 작동하도록 만들어보자.
49/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
[예제 13-18] 로그인/로그아웃 메뉴가 있는 웹 템플릿
<%@page contentType= “text/html; charset=euc-kr ” %>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<HTML>
<HEAD>
<TITLE>한빛미디어</TITLE>
</HEAD>
<BODY>
<H1>한빛미디어</H1>
<TABLE border=1 cellpadding=10>
<TR>
<TD width=150 valign=top>
<c:choose>
<c:when test= “${sessionScope.LOGIN_ID == null} ”>
<A HREF= “WebTemplate.jsp?BODY_PATH=LoginForm.html ”>로그인</A><BR>
</c:when>
<c:otherwise>
<A HREF= “logout ”>로그아웃</A><BR>
</c:otherwise>
</c:choose>
<A HREF= “WebTemplate.jsp?BODY_PATH=Intro.html ”>회사 소개</A><BR>
<A HREF= “books-info ”>책 정보</A><BR>
<A HREF= “WebTemplate.jsp?BODY_PATH=BBSInput.html ”>게시판 글쓰기</A><BR>
<A HREF= “bbs-list ”>게시판 글읽기</A><BR>
</TD>
<TD valign=top width=650>
<jsp:include page= “${param.BODY_PATH} ” />
</TD>
</TR>
</TABLE>
<H5>Copyright@ 1993-2010 한빛미디어(주)</H5>
</BODY>
</HTML>
50/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 기능 추가하기
51/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
 이번에는 다음과 같이 작동하는 로그인/로그아웃 창을 만들어보자.
52/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
 앞 그림처럼 작동하는 로그인/로그아웃 창을 만들기 위해서 다음과 같은 모듈들이 필요
하다.
53/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
[예제 13-19] 로그인 창을 디스플레이하는 HTML 문서
<FORM ACTION=new-login METHOD=POST onSubmit= “CURRENT_URL.value = window.location.href ”>
아이디: <INPUT TYPE=TEXT NAME=ID SIZE=12> <BR>
패스워드: <INPUT TYPE=PASSWORD NAME=PASSWORD SIZE=12> <BR>
<INPUT TYPE=HIDDEN NAME=CURRENT_URL>
<INPUT TYPE=SUBMIT VALUE= ‘로그인 ’> <BR>
</FORM>
[예제 13-20] 로그아웃 창을 디스플레이하는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr ” %>
<FORM ACTION=new-logout METHOD=GET onSubmit= “CURRENT_URL.value = window.location.href ”>
안녕하세요, ${sessionScope.LOGIN_ID}님 <BR>
<INPUT TYPE=HIDDEN NAME=CURRENT_URL>
<INPUT TYPE=SUBMIT VALUE= ‘로그아웃 ’> <BR>
</FORM>
54/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
[예제 13-21] 로그인 처리를 하는 서블릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class NewLoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String id = request.getParameter( “ID ”);
String password = request.getParameter( “PASSWORD ”);
String currentURL = request.getParameter( “CURRENT_URL ”);
if (checkLoginInfo(id, password)) {
HttpSession session = request.getSession();
session.setAttribute( “LOGIN_ID ”, id);
}
response.sendRedirect(currentURL);
}
private boolean checkLoginInfo(String id, String password)
throws ServletException {
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver “);
conn = DriverManager.getConnection( “jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception( “데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery( “select password ” +
“from userinfo where id = ‘” + id + “’; ”);
if (!rs.next())
return false;
String correctPassword = rs.getString( “password ”);
if (password.equals(correctPassword))
return true;
else
return false;
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
try {
conn.close();
}
catch (Exception ignored) {
}
}
}
}
55/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
[예제 13-22] 로그아웃 처리를 하는 서블릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
public class NewLogoutServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String currentURL = request.getParameter( “CURRENT_URL ”);
HttpSession session = request.getSession();
session.removeAttribute( “LOGIN_ID ”);
response.sendRedirect(currentURL);
}
}
56/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
[예제 13-23] 로그인/로그아웃 메뉴가 있는 웹 템플릿
<%@page contentType= “text/html; charset=euc-kr ” %>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<HTML>
<HEAD>
<TITLE>한빛미디어</TITLE>
</HEAD>
<BODY>
<H1>한빛미디어</H1>
<TABLE border=1 cellpadding=10>
<TR>
<TD width=190 valign=top>
<c:choose>
<c:when test= “${sessionScope.LOGIN_ID == null} ”>
<jsp:include page= “LoginWindow.html ” />
</c:when>
<c:otherwise>
<jsp:include page= “LogoutWindow.jsp ” />
</c:otherwise>
</c:choose>
<A HREF= “WebTemplate.jsp?BODY_PATH=Intro.html ”>회사 소개</A><BR>
<A HREF= “books-info ”>책 정보</A><BR>
<A HREF= “WebTemplate.jsp?BODY_PATH=BBSInput.html ”>게시판 글쓰기</A><BR>
<A HREF= “bbs-list ”>게시판 글읽기</A><BR>
</TD>
<TD valign=top width=650>
<jsp:include page= “${param.BODY_PATH} ” />
</TD>
</TR>
</TABLE>
<H5>Copyright@ 1993-2010 한빛미디어(주)</H5>
</BODY>
</HTML>
57/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 웹 템플릿에 로그인/로그아웃 창 만들기
58/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
 마지막으로 다음과 같이 작동하는 장바구니 기능을 구현해보자.
59/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
 장바구니 기능을 구현하기 위해 필요한 애플리케이션
• 책 정보 보기 애플리케이션
• 장바구니 담기 애플리케이션
• 장바구니 관리 애플리케이션
 책 정보 보기 애플리케이션 구성도는 다음과 같다.
60/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-24] 책 정보 목록을 표현하는 자바빈 클래스
package web;
import java.io.*;
import java.sql.*;
import java.util.ArrayList;
public class BooksInfo {
private ArrayList<String> codeList = new ArrayList<String>();
// 상품코드
private ArrayList<String> titleList = new ArrayList<String>();
// 제목
private ArrayList<String> writerList = new ArrayList<String>(); // 저자
private ArrayList<Integer> priceList = new ArrayList<Integer>(); // 가격
private boolean lastPage = false; // 책 정보 목록의 마지막 페이지인지 여부
public BooksInfo() {
}
public void setCode(int index, String code) {
this.codeList.add(index, code);
}
public void setTitle(int index, String title) {
this.titleList.add(index, title);
}
public void setWriter(int index, String writer) {
this.writerList.add(index, writer);
}
public void setPrice(int index, Integer price) {
this.priceList.add(index, price);
}
public void setLastPage(boolean lastPage) {
this.lastPage = lastPage;
}
public String[] getCode() {
return codeList.toArray(new String[codeList.size()]);
}
public String[] getTitle() {
return titleList.toArray(new String[titleList.size()]);
}
public String[] getWriter() {
return writerList.toArray(new String[writerList.size()]);
}
public Integer[] getPrice() {
return priceList.toArray(new Integer[priceList.size()]);
}
public boolean isLastPage() {
return lastPage;
}
public int getSize() { // 책 정보의 수를 리턴하는 메서드
return codeList.size();
}
}
61/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-25] 데이터베이스로부터 책 정보를 읽는 서블릿 클래스
ResultSet rs = stmt.executeQuery( “select * ” +
“from goodsinfo where code > ‘” +
lowerCode + “’ order by code asc; ”);
for (int cnt = 0; cnt < 5; cnt++) {
if (!rs.next())
break;
booksInfo.setCode(cnt, rs.getString( “code ”));
booksInfo.setTitle(cnt, toUnicode(rs.getString( “title ”)));
booksInfo.setWriter(cnt, toUnicode(rs.getString( “writer ”)));
booksInfo.setPrice(cnt, rs.getInt( “price ”));
}
if (!rs.next())
booksInfo.setLastPage(true);
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class BooksInfoServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String lowerCode = request.getParameter( “LAST_CODE ”);
if (lowerCode == null)
lowerCode = “00000 ”;
BooksInfo booksInfo = readDB(lowerCode);
request.setAttribute( “BOOKS_INFO ”, booksInfo);
RequestDispatcher dispatcher = request.getRequestDispatcher(
“WebTemplate.jsp?BODY_PATH=BooksInfoView.jsp ”);
dispatcher.forward(request, response);
}
// 데이터베이스로부터 책 정보를 읽는 메서드
private BooksInfo readDB(String lowerCode) throws ServletException {
BooksInfo booksInfo = new BooksInfo();
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver ”);
conn = DriverManager.getConnection(
“jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception( “데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
try {
conn.close();
}
catch (Exception ignored) {
}
}
return booksInfo;
}
62/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
// ISO-8859-1 문자열을 Unicode 문자열로 바꾸는 메서드
private String toUnicode(String str) {
if (str == null)
return null;
try {
byte[] b = str.getBytes(“ISO-8859-1”);
return new String(b);
}
catch (java.io.UnsupportedEncodingException uee) {
System.out.println(uee.getMessage());
return null;
}
}
}
63/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-26] 책 정보 목록을 출력하는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr “%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<H4>책 정보</H4>
<TABLE border=1>
<TR>
<TD width=70>상품코드</TD>
<TD width=250>제목</TD>
<TD width=80>저자</TD>
<TD width=80>가격</TD>
<TD width=120>&nbsp;</TD>
</TR>
<c:forEach var= “cnt ” begin= “0 ” end= “${BOOKS_INFO.size - 1} ”>
<TR>
<TD>${BOOKS_INFO.code[cnt]}</TD>
<TD>${BOOKS_INFO.title[cnt]}</TD>
<TD>${BOOKS_INFO.writer[cnt]}</TD>
<TD>${BOOKS_INFO.price[cnt]}원</TD>
<TD><A href= ‘# ’ onClick= ‘window.open(
“add-item-to-cart?CODE=${BOOKS_INFO.code[cnt]} ”,
“cart_result ”, “width=400,height=150 ”).focus() ’>장바구니 담기</A></TD>
</TR>
</c:forEach>
</TABLE>
<c:if test= “${!BOOKS_INFO.lastPage} ”>
<A href= ‘books-info?LAST_CODE=${
BOOKS_INFO.code[BOOKS_INFO.size - 1]} ’>다음 페이지</A>
</c:if>
64/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
65/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
 장바구니 담기 애플리케이션의 구성도는 다음과 같다.
66/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-27] 장바구니 데이터를 표현하는 클래스
[예제 13-28] 장바구니에 책을 담는 서블릿 클래스
package web;
import java.util.LinkedList;
public class Cart {
private LinkedList<String> codeList = new LinkedList<String>(); // 상품코드
private LinkedList<Integer> numberList = new LinkedList<Integer>(); // 수량
// 장바구니에 책 정보를 추가하는 메서드
public void addItem(String code, int num) {
for (int cnt = 0; cnt < codeList.size(); cnt++) {
if (codeList.get(cnt).equals(code)) {
numberList.set(cnt, numberList.get(cnt) + 1);
return;
}
}
codeList.add(code);
numberList.add(num);
}
public String getCode(int index) {
return codeList.get(index);
}
public int getNumber(int index) {
return numberList.get(index);
}
public int getSize() { // 장바구니에 있는 항목의 수를 리턴하는 메서드
return codeList.size();
}
}
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
public class AddItemToCartServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String code = request.getParameter( “CODE ”);
if (code == null)
throw new ServletException( “상품코드가 입력되지 않았습니다. ”);
HttpSession session = request.getSession();
Cart cart = (Cart) session.getAttribute( “CART ”);
if (cart == null)
cart = new Cart();
cart.addItem(code, 1);
session.setAttribute( “CART ”, cart);
response.sendRedirect(“AddItemToCartResult.jsp?ITEM_NUM=” +1);
}
}
67/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-29] 장바구니 담기의 결과를 보여주는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr ”%>
<HTML>
<HEAD><TITLE>장바구니 담기</TITLE></HEAD>
<BODY>
<H4>장바구니 담기</H4>
장바구니에 ${param.ITEM_NUM}개의 상품을 담았습니다.<BR><BR>
<A href= ‘# ’ onClick= ‘self.close() ’>닫기</A>
</BODY>
</HTML>
68/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
 다음은 장바구니 관리 애플리케이션 화면 설계와 구성도 이다.
[그림 13-47] 장바구니 관리 애플리케이션의 화면 설계
69/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-30] 장바구니 목록을 표현하는 자바빈 클래스
package web;
import java.io.*;
import java.sql.*;
import java.util.ArrayList;
public class CartList {
private ArrayList<String> codeList = new ArrayList<String>();
// 상품코드
private ArrayList<String> titleList = new ArrayList<String>();
// 제목
private ArrayList<Integer> priceList = new ArrayList<Integer>(); // 단가
private ArrayList<Integer> numberList = new ArrayList<Integer>(); // 수량
public CartList() {
}
public void setCode(int index, String code) {
this.codeList.add(index, code);
}
public void setTitle(int index, String title) {
this.titleList.add(index, title);
}
public void setPrice(int index, Integer price) {
this.priceList.add(index, price);
}
public void setNumber(int index, Integer number) {
this.numberList.add(index, number);
}
public String[] getCode() {
return codeList.toArray(new String[codeList.size()]);
}
public String[] getTitle() {
return titleList.toArray(new String[titleList.size()]);
}
public Integer[] getPrice() {
return priceList.toArray(new Integer[priceList.size()]);
}
public Integer[] getNumber() {
return numberList.toArray(new Integer[numberList.size()]);
}
public int getTotalAmount() {
int total = 0;
for (int cnt = 0; cnt < codeList.size(); cnt++)
total += priceList.get(cnt) * numberList.get(cnt);
return total;
}
// 장바구니 목록에 있는 항목의 수를 리턴하는 메서드
public int getSize() {
return codeList.size();
}
}
70/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
int itemNum = cart.getSize();
for (int cnt = 0; cnt < itemNum; cnt++) {
String code = cart.getCode(cnt);
int number = cart.getNumber(cnt);
ResultSet rs = stmt.executeQuery(
“select title, price from goodsinfo ” +
“where code = ‘” + code + “’; ”);
if (!rs.next())
throw new Exception(
“해당 상품이 없습니다. [상품코드: ” +
code + “] ”);
String title = rs.getString( “title ”);
int price = rs.getInt( “price ”);
cartList.setCode(cnt, code);
cartList.setTitle(cnt, toUnicode(title));
cartList.setPrice(cnt, price);
cartList.setNumber(cnt, number);
}
[예제 13-31] 장바구니 목록을 만드는 서블릿 클래스
package web;
import javax.servlet.http.*;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class CartListServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
HttpSession session = request.getSession();
Cart cart = (Cart) session.getAttribute( “CART ”);
if (cart != null) {
CartList cartList = readDB(cart);
request.setAttribute( “CART_LIST ”, cartList);
}
else {
request.setAttribute( “CART_LIST ”, null);
}
RequestDispatcher dispatcher = request.getRequestDispatcher(
“WebTemplate.jsp?BODY_PATH=CartListView.jsp ”);
dispatcher.forward(request, response);
}
// DB로부터 책 정보를 읽는 메서드
private CartList readDB(Cart cart) throws ServletException {
CartList cartList = new CartList();
Connection conn = null;
Statement stmt = null;
try {
Class.forName( “org.apache.commons.dbcp.PoolingDriver ”);
conn = DriverManager.getConnection(“jdbc:apache:commons:dbcp:/wdbpool ”);
if (conn == null)
throw new Exception( “데이터베이스에 연결할 수 없습니다. ”);
stmt = conn.createStatement();
}
catch (Exception e) {
throw new ServletException(e);
}
finally {
try {
stmt.close();
}
catch (Exception ignored) {
}
try {
conn.close();
}
catch (Exception ignored) {
}
}
return cartList;
}
71/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
// ISO-8859-1 문자열을 Unicode 문자열로 바꾸는 메서드
private String toUnicode(String str) {
if (str == null)
return null;
try {
byte[] b = str.getBytes( “ISO-8859-1 ”);
return new String(b);
}
catch (java.io.UnsupportedEncodingException uee) {
System.out.println(uee.getMessage());
return null;
}
}
}
72/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-32] 장바구니 목록을 출력하는 JSP 페이지
<%@page contentType= “text/html; charset=euc-kr ”%>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<H4>장바구니 관리</H4>
<c:choose>
<c:when test= “${CART_LIST == null || CART_LIST.size <= 0} ”>
장바구니가 비어 있습니다.
</c:when>
<c:otherwise>
<TABLE border=1>
<TR>
<TD width=70>상품코드</TD>
<TD width=250>제목</TD>
<TD width=80>단가</TD>
<TD width=50>수량</TD>
<TD width=100>금액</TD>
</TR>
<c:forEach var= “cnt ” begin= “0 ” end= “${CART_LIST.size - 1} ”>
<TR>
<TD>${CART_LIST.code[cnt]}</TD>
<TD>${CART_LIST.title[cnt]}</TD>
<TD>${CART_LIST.price[cnt]}원</TD>
<TD>${CART_LIST.number[cnt]}</TD>
<TD>${CART_LIST.price[cnt] * CART_LIST.number[cnt]}원</TD>
</TR>
</c:forEach>
</TABLE>
<FORM ACTION=/brain13/pay METHOD=POST>
총계: ${CART_LIST.totalAmount}원
<INPUT TYPE=HIDDEN NAME=TOTAL_AMOUNT VALUE=${CART_LIST.totalAmount}>
<INPUT TYPE=SUBMIT VALUE= ‘카드결제 ’>
</FORM>
</c:otherwise>
</c:choose>
73/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
[예제 13-33] 장바구니 메뉴가 있는 웹 템플릿
<%@page contentType= “text/html; charset=euc-kr ” %>
<%@taglib prefix= “c ” uri= “http://java.sun.com/jsp/jstl/core ” %>
<HTML>
<HEAD>
<TITLE>한빛미디어</TITLE>
</HEAD>
<BODY>
<H1>한빛미디어</H1>
<TABLE border=1 cellpadding=10>
<TR>
<TD width=190 valign=top>
<c:choose>
<c:when test= “${sessionScope.LOGIN_ID == null} ”>
<jsp:include page= “LoginWindow.html ” />
</c:when>
<c:otherwise>
<jsp:include page= “LogoutWindow.jsp ” />
</c:otherwise>
</c:choose>
<A HREF= “WebTemplate.jsp?BODY_PATH=Intro.html ”>회사 소개</A><BR>
<A HREF= “books-info ”>책 정보</A><BR>
<A HREF= “WebTemplate.jsp?BODY_PATH=BBSInput.html ”>게시판 글쓰기</A><BR>
<A HREF= “bbs-list ”>게시판 글읽기</A><BR>
<A HREF= “cart-list ”>장바구니</A><BR>
</TD>
<TD valign=top width=650>
<jsp:include page= “${param.BODY_PATH} ” />
</TD>
</TR>
</TABLE>
<H5>Copyright@ 1993-2010 한빛미디어(주)</H5>
</BODY>
</HTML>
74/75
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
 장바구니 기능 구현하기
75/75
뇌를 자극하는 JSP & Servlet