76
뇌뇌 뇌뇌뇌뇌 JSP & Servlet 뇌뇌 뇌뇌뇌 뇌 뇌뇌뇌

설계 모델과 웹 템플릿

  • Upload
    albina

  • View
    114

  • Download
    9

Embed Size (px)

DESCRIPTION

13. 설계 모델과 웹 템플릿. 학습목표 이번 장에서는 개발 작업의 효율성과 유지관리의 용이성을 위해 필요한 설계 모델과 웹 템플릿에 대해 알아보자 . 내용 설계 모델과 웹 템플릿에 대하여 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기 웹 템플릿으로 일관된 사용자 인터페이스 만들기. 1. 설계 모델과 웹 템플릿에 대하여. JSP 와 서블릿 기반의 설계 모델 – 모델 1 과 모델 2 - PowerPoint PPT Presentation

Citation preview

Page 1: 설계 모델과 웹 템플릿

뇌를 자극하는 JSP & Servlet

설계 모델과 웹 템플릿

Page 2: 설계 모델과 웹 템플릿

2/69

Contents

학습목표

이번 장에서는 개발 작업의 효율성과 유지관리의 용이성을 위해 필요한 설계

모델과 웹 템플릿에 대해 알아보자 .

내용 설계 모델과 웹 템플릿에 대하여 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 3: 설계 모델과 웹 템플릿

3/75

JSP 와 서블릿 기반의 설계 모델 – 모델 1 과 모델 2 JSP 규격서의 초기 버전에서 소개하고 있는 설계 모델 (design model) 인 모델 1 과 모델

2 는 웹 애플리케이션이 해야 할 일을 다음 세가지로 구분하여 모듈화하는 방법을

제시하고 있다 .• 데이터 입력

• 데이터 처리

• 데이터 출력

모델 1 은 비교적 간단한 웹 애플리케이션에 적합한 설계 모델이고 , 모델 2 는 비교적

복잡한 웹 애플리케이션에 적합한 설계 모델이다 .

1. 설계 모델과 웹 템플릿에 대하여

Page 4: 설계 모델과 웹 템플릿

4/75

JSP 와 서블릿 기반의 설계 모델 – 모델 1 과 모델 2 모델 1 은 웹 애플리케이션을 두 종류의 모듈로 나누어 각각 JSP 페이지와 자바빈

클래스로 구현하도록 제안한다 .

• JSP 페이지는 데이터의 입력과 출력을 담당한다 .• 자바빈 클래스는 데이터 처리를 담당한다 .

1. 설계 모델과 웹 템플릿에 대하여

Page 5: 설계 모델과 웹 템플릿

5/75

JSP 와 서블릿 기반의 설계 모델 – 모델 1 과 모델 2 모델 2 는 웹 애플리케이션을 세 종류의 모듈로 나누어서 각각 서블릿 클래스 , JSP

페이지 , 자바빈 클래스로 구현하도록 제안하고 있다 .

• 서블릿 클래스는 데이터 입력과 데이터 처리를 담당한다 .

• JSP 페이지는 데이터 출력을 담당한다 .• 자바빈 클래스는 서블릿 클래스가 JSP 페이지로 넘겨주는 데이터를 포장하는 일만 한다 .

1. 설계 모델과 웹 템플릿에 대하여

Page 6: 설계 모델과 웹 템플릿

6/75

사용자 인터페이스에 일관성을 부여하는 웹 템플릿 웹 사이트 외관의 일관성을 위해서는 여러 웹 페이지들 간에 공통되는 부분의 코드를

추출해서 단일 파일로 유지하는 것이 좋다 . 이런 파일을 웹 템플릿 (web template)이라고 부른다 .

웹 템플릿은 HTML 과 JSP 의 문법을 이용해서 작성할 수 있고 , 웹 페이지마다

달라져야 하는 부분은 <jsp:include> 표준 액션을 이용해서 외부 파일로부터 불러오면

된다 .

1. 설계 모델과 웹 템플릿에 대하여

Page 7: 설계 모델과 웹 템플릿

7/75

사용자 인터페이스에 일관성을 부여하는 웹 템플릿

1. 설계 모델과 웹 템플릿에 대하여

Page 8: 설계 모델과 웹 템플릿

8/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기 다음과 같이 작동하는 애플리케이션을 모델 1 을 이용해서 작성해보자 .

위 애플리케이션은 다음과 같은 일을 해야 한다 .• 데이터 입력 - 웹 브라우저로부터 입력된 게시글의 순번을 받는다 .• 데이터 처리 - 그에 해당하는 게시글을 데이터베이스로부터 읽는다 .• 데이터 출력 - 그 결과를 HTML 코드로 만들어서 웹 브라우저로 출력한다 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 그림 13-4] 게시글 읽기 애플리케이션의 작동 방식

① URL 과 함께 게시글의 순번을 입력하면

② 데이터베이스에 있는 게시글의 내용이 출력됩니다 .

Page 9: 설계 모델과 웹 템플릿

9/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기 모델 1 에 따라 앞의 애플리케이션을 모듈화하면 다음과 같다 .

위 두 모듈의 코딩에 들어가기에 앞서 이 애플리케이션의 실행에 필요한 게시판

테이블을 다음과 같이 설계하자 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

테이블 이름 : 게시판 테이블 (bbs)

한글 항목명 영문 항목명 타입 크기

순번 seqno integer 8제목 title varchar 50내용 content varchar 500작성자 writer varchar 20저장일자 wdate date 3저장시각 wtime time 3

Page 10: 설계 모델과 웹 템플릿

10/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) { }

Page 11: 설계 모델과 웹 템플릿

11/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; } }}

Page 12: 설계 모델과 웹 템플릿

12/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 예제 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>

Page 13: 설계 모델과 웹 템플릿

13/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 예제 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>

Page 14: 설계 모델과 웹 템플릿

14/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 예제 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>

Page 15: 설계 모델과 웹 템플릿

15/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

Page 16: 설계 모델과 웹 템플릿

16/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기 애플리케이션을 실행하기 전에 마지막으로 해야 할 일은 사용하고 있는 JDBC API 와

데이터베이스 커넥션 풀을 위한 환경 설정이다 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

Page 17: 설계 모델과 웹 템플릿

17/75

모델 1 으로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 그림 13-9] 예제 13-1, 예제 13-4 의 실행 결과

Page 18: 설계 모델과 웹 템플릿

18/75

모델 2 로 웹 애플리케이션 설계하고 구현하기 다음과 같이 작동하는 애플리케이션을 모델 1 을 이용해서 작성해보자 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

Page 19: 설계 모델과 웹 템플릿

19/75

모델 2 로 웹 애플리케이션 설계하고 구현하기 앞의 그림처럼 작동하는 애플리케이션을 모델 2 로 설계하면 다음과 같다 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

Page 20: 설계 모델과 웹 템플릿

20/75

모델 2 로 웹 애플리케이션 설계하고 구현하기 모델 2 에서는 자바빈 클래스에 데이터를 처리하는 복잡한 로직이 포함되지 않으므로

생성자와 get- 메서드 , set- 메서드만 있으면 된다 . 하나의 자바빈에 똑같은 이름의 프로퍼티가 여러 개를 있을 경우에는 set- 메서드의 첫

번째 파라미터로 인덱스 값을 받도록 만들거나 , 모든 프로퍼티 값을 포함한 배열을

파라미터로 넘겨주는 방법을 사용해야 한다 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

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; }}

Page 21: 설계 모델과 웹 템플릿

21/75

모델 2 로 웹 애플리케이션 설계하고 구현하기 get- 메서드의 작성 방법도 두 가지 인데 하나는 인덱스 값을 파라미터로 받는 방법이고 ,

다른 하나는 모든 프로퍼티 값이 들어 있는 배열을 통째로 리턴하는 방법이다 .

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

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; }}

Page 22: 설계 모델과 웹 템플릿

22/75

모델 2 로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 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(); }}

Page 23: 설계 모델과 웹 템플릿

23/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; }

Page 24: 설계 모델과 웹 템플릿

24/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; } }}

Page 25: 설계 모델과 웹 템플릿

25/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>

Page 26: 설계 모델과 웹 템플릿

26/75

모델 2 로 웹 애플리케이션 설계하고 구현하기

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 그림 13-13] 예제 13-6 의 서블릿 클래스를 등록하는 방법

Page 27: 설계 모델과 웹 템플릿

27/75

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

[ 그림 13-15] 게시글 목록 보기 애플리케이션의 테스트를 위한 데이터 입력 방법

Page 28: 설계 모델과 웹 템플릿

28/75

2. 모델 1 과 모델 2 로 웹 애플리케이션 설계하고 구현하기

Page 29: 설계 모델과 웹 템플릿

29/75

웹 템플릿 만들기 웹 템플릿을 만들기 위해 가장 먼저 해야 할 일은 웹 사이트를 구성하는 웹 페이지들의

공통부분을 추출해내는 것이다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 30: 설계 모델과 웹 템플릿

30/75

웹 템플릿 만들기 특별한 경우가 아니라면 , 중앙의 가장 넓은 부분을 제외한 위쪽 , 왼쪽 , 오른쪽 ,

아래쪽에 공통 부분이 위치하는 것이 보통이다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

머리부

좌측 메뉴

꼬리부

몸체

[ 그림 13-18] 웹 템플릿의 구성 요소

Page 31: 설계 모델과 웹 템플릿

31/75

웹 템플릿 만들기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 예제 13-8] 웹 템플릿의 예

<%@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>

[ 예제 13-9] 회사 소개 웹 페이지의 몸체 부분

<H4> 회사 소개 </H4>한빛미디어 ( 주 ) 는 지난 15 년 동안 국내 컴퓨터 / 정보통신 분야의 성장과 더불어 IT 전문가들의 풍부한 실무 경험과 현장 노하우를 책으로 출간하면서 해당 분야의 IT 개발자들과 함께 발전해 왔습니다 .

[ 그림 13-19] 웹 템플릿을 통해 출력한 회사 소개 웹 페이지

Page 32: 설계 모델과 웹 템플릿

32/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] 웹 템플릿을 통해 출력한 게시판 글쓰기 웹 페이지

Page 33: 설계 모델과 웹 템플릿

33/75

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞에서처럼 <jsp:include> 액션을 이용해서 웹 템플릿에 몸체 부분을 포함시키는 방법

은 , 웹 애플리케이션의 실행 결과를 출력할 때는 통하지 않을 수도 있다 . 게시판 읽기 애플리케이션의 경우에는 이 방법으로 올바른 결과를 얻을 수 있다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 34: 설계 모델과 웹 템플릿

34/75

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 하지만 게시글 목록 보기 애플리케이션에 대해 똑같은 방법을 사용하면 다음과 같은 웹

템플릿 없이 결과가 나타난다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 35: 설계 모델과 웹 템플릿

35/75

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞 페이지의 문제를 해결하려면 게시글 목록 보기 애플리케이션의 데이터 처리 로직과

데이터 출력 로직 사이에서 웹 템플릿이 실행되도록 만들면 된다 .

게시글 목록 보기 애플리케이션은 모델 2 로 작성되었기 때문에 이미 데이터 처리

로직과 데이터 출력 로직으로 나누어서 모듈화되어 있다 . 그러므로 [ 예제 13-6] 의

서블릿 클래스 16 행을 다음과 같이 수정하면 위 그림과 같이 작동하게 된다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 36: 설계 모델과 웹 템플릿

36/75

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 수정된 게시글 목록 보기 애플리케이션은 다음과 같이 올바르게 작동한다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

2) 게시글 목록이 웹 템플릿을 통해 출력될 것입니다 .

1) [ 예제 13-6] 의 URL 을 입력하십시오 .

[ 그림 13-24] 웹 템플릿을 통해 출력한 게시판 목록

Page 37: 설계 모델과 웹 템플릿

37/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}

Page 38: 설계 모델과 웹 템플릿

38/75

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 39: 설계 모델과 웹 템플릿

39/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기 이번에는 다음과 같이 작동하는 애플리케이션을 작성해보자 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 40: 설계 모델과 웹 템플릿

40/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기 로그인 입력 화면은 다음과 같은 HTML 문서로 구현할 수 있다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 예제 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>

Page 41: 설계 모델과 웹 템플릿

41/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기 로그인 버튼을 눌렀을 때 호출되는 로그인 애플리케이션은 다음과 같은 일을 해야 한다 .

• 데이터 입력 : 아이디와 패스워드를 입력 받는다 .• 데이터 처리 : 입력 아이디에 해당하는 패스워드를 데이터베이스로부터 읽어서 입력된

패스워드와 비교한다 . 두 값이 동일하면 세션 데이터 영역에 로그인 상태를 저장한다 .• 데이터 출력 : 로그인에 성공하면 그림 13-26 의 아래 왼쪽에 있는 메시지를 , 실패하면

오른쪽에 있는 메시지를 출력한다 .

로그인 결과가 웹 템플릿 안에 나타나도록 만들기 위해서 모듈의 실행 순서를 다음과

같이 배치해야 한다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 42: 설계 모델과 웹 템플릿

42/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) { } } }}

Page 43: 설계 모델과 웹 템플릿

43/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>

Page 44: 설계 모델과 웹 템플릿

44/75

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

mysql.exe 프로그램을이용해서 webdb데이터베이스로들어가세요

userinfo 테이블에 데이터를입력하세요

[ 그림 13-29] 로그인 애플리케이션의 실행에 필요한 데이터 입력 방법

Page 45: 설계 모델과 웹 템플릿

45/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 46: 설계 모델과 웹 템플릿

46/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>

Page 47: 설계 모델과 웹 템플릿

47/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 48: 설계 모델과 웹 템플릿

48/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 그림 13-33] 예제 13-16, 예제 13-17 의 실행 결과

Page 49: 설계 모델과 웹 템플릿

49/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기 이번에는 웹 템플릿의 좌측 메뉴가 다음과 같이 작동하도록 만들어보자 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 50: 설계 모델과 웹 템플릿

50/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>

Page 51: 설계 모델과 웹 템플릿

51/75

웹 템플릿에 로그인 / 로그아웃 기능 추가하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 52: 설계 모델과 웹 템플릿

52/75

웹 템플릿에 로그인 / 로그아웃 창 만들기 이번에는 다음과 같이 작동하는 로그인 / 로그아웃 창을 만들어보자 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 53: 설계 모델과 웹 템플릿

53/75

웹 템플릿에 로그인 / 로그아웃 창 만들기 앞 그림처럼 작동하는 로그인 / 로그아웃 창을 만들기 위해서 다음과 같은 모듈들이

필요하다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 54: 설계 모델과 웹 템플릿

54/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>

Page 55: 설계 모델과 웹 템플릿

55/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) { } } }}

Page 56: 설계 모델과 웹 템플릿

56/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); }}

Page 57: 설계 모델과 웹 템플릿

57/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>

Page 58: 설계 모델과 웹 템플릿

58/75

웹 템플릿에 로그인 / 로그아웃 창 만들기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 59: 설계 모델과 웹 템플릿

59/75

장바구니 기능 구현하기 마지막으로 다음과 같이 작동하는 장바구니 기능을 구현해보자 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 60: 설계 모델과 웹 템플릿

60/75

장바구니 기능 구현하기 장바구니 기능을 구현하기 위해 필요한 애플리케이션

• 책 정보 보기 애플리케이션

• 장바구니 담기 애플리케이션

• 장바구니 관리 애플리케이션

책 정보 보기 애플리케이션 구성도는 다음과 같다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 61: 설계 모델과 웹 템플릿

61/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(); }}

Page 62: 설계 모델과 웹 템플릿

62/75

장바구니 기능 구현하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 예제 13-25] 데이터베이스로부터 책 정보를 읽는 서블릿 클래스

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();

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); } catch (Exception e) { throw new ServletException(e); } finally { try { stmt.close(); } catch (Exception ignored) { } try { conn.close(); } catch (Exception ignored) { } } return booksInfo; }

Page 63: 설계 모델과 웹 템플릿

63/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; } }}

Page 64: 설계 모델과 웹 템플릿

64/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>

Page 65: 설계 모델과 웹 템플릿

65/75

장바구니 기능 구현하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 66: 설계 모델과 웹 템플릿

66/75

장바구니 기능 구현하기 장바구니 담기 애플리케이션의 구성도는 다음과 같다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 67: 설계 모델과 웹 템플릿

67/75

장바구니 기능 구현하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 예제 13-27] 장바구니 데이터를 표현하는 클래스

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(); }}

[ 예제 13-28] 장바구니에 책을 담는 서블릿 클래스

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); }}

Page 68: 설계 모델과 웹 템플릿

68/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>

Page 69: 설계 모델과 웹 템플릿

69/75

장바구니 기능 구현하기 다음은 장바구니 관리 애플리케이션 화면 설계와 구성도 이다 .

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 그림 13-47] 장바구니 관리 애플리케이션의 화면 설계

Page 70: 설계 모델과 웹 템플릿

70/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(); }}

Page 71: 설계 모델과 웹 템플릿

71/75

장바구니 기능 구현하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

[ 예제 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();

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); } } catch (Exception e) { throw new ServletException(e); } finally { try { stmt.close(); } catch (Exception ignored) { } try { conn.close(); } catch (Exception ignored) { } } return cartList; }

Page 72: 설계 모델과 웹 템플릿

72/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; } }}

Page 73: 설계 모델과 웹 템플릿

73/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>

Page 74: 설계 모델과 웹 템플릿

74/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>

Page 75: 설계 모델과 웹 템플릿

75/75

장바구니 기능 구현하기

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

Page 76: 설계 모델과 웹 템플릿

뇌를 자극하는 JSP & Servlet