13 설계 모델과 웹 템플릿
학습목표 내용 이번 장에서는 개발 작업의 효율성과 유지관리의 용이성을 위해 필요한 설계 모델과 웹 템플릿에 대해 알아보자. 이번 장에서는 개발 작업의 효율성과 유지관리의 용이성을 위해 필요한 설계 모델과 웹 템플릿에 대해 알아보자. 내용 설계 모델과 웹 템플릿에 대하여 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 웹 템플릿으로 일관된 사용자 인터페이스 만들기
1. 설계 모델과 웹 템플릿에 대하여 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2 JSP 규격서의 초기 버전에서 소개하고 있는 설계 모델(design model)인 모델 1과 모델 2 는 웹 애플리케이션이 해야 할 일을 다음 세가지로 구분하여 모듈화하는 방법을 제시하 고 있다. 데이터 입력 데이터 처리 데이터 출력 모델 1은 비교적 간단한 웹 애플리케이션에 적합한 설계 모델이고, 모델 2는 비교적 복 잡한 웹 애플리케이션에 적합한 설계 모델이다.
1. 설계 모델과 웹 템플릿에 대하여 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2 자바빈 클래스는 데이터 처리를 담당한다.
1. 설계 모델과 웹 템플릿에 대하여 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2 서블릿 클래스는 데이터 입력과 데이터 처리를 담당한다. JSP 페이지는 데이터 출력을 담당한다. 자바빈 클래스는 서블릿 클래스가 JSP 페이지로 넘겨주는 데이터를 포장하는 일만 한다.
1. 설계 모델과 웹 템플릿에 대하여 사용자 인터페이스에 일관성을 부여하는 웹 템플릿 웹 사이트 외관의 일관성을 위해서는 여러 웹 페이지들 간에 공통되는 부분의 코드를 추 출해서 단일 파일로 유지하는 것이 좋다. 이런 파일을 웹 템플릿(web template)이라고 부 른다. 웹 템플릿은 HTML과 JSP의 문법을 이용해서 작성할 수 있고, 웹 페이지마다 달라져야 하는 부분은 <jsp:include> 표준 액션을 이용해서 외부 파일로부터 불러오면 된다.
1. 설계 모델과 웹 템플릿에 대하여 사용자 인터페이스에 일관성을 부여하는 웹 템플릿
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 모델 1으로 웹 애플리케이션 설계하고 구현하기 다음과 같이 작동하는 애플리케이션을 모델 1을 이용해서 작성해보자. 위 애플리케이션은 다음과 같은 일을 해야 한다. 데이터 입력 - 웹 브라우저로부터 입력된 게시글의 순번을 받는다. 데이터 처리 - 그에 해당하는 게시글을 데이터베이스로부터 읽는다. 데이터 출력 - 그 결과를 HTML 코드로 만들어서 웹 브라우저로 출력한다. ① URL과 함께 게시글의 순번을 입력하면 ② 데이터베이스에 있는 게시글의 내용이 출력됩니다. [그림 13-4] 게시글 읽기 애플리케이션의 작동 방식
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 모델 1으로 웹 애플리케이션 설계하고 구현하기 모델 1에 따라 앞의 애플리케이션을 모듈화하면 다음과 같다. 위 두 모듈의 코딩에 들어가기에 앞서 이 애플리케이션의 실행에 필요한 게시판 테이블 을 다음과 같이 설계하자. 테이블 이름: 게시판 테이블 (bbs) 한글 항목명 영문 항목명 타입 크기 순번 seqno integer 8 제목 title varchar 50 내용 content 500 작성자 writer 20 저장일자 wdate date 3 저장시각 wtime time
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 { stmt.close(); catch (Exception ignored) {
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 try { conn.close(); } catch (Exception ignored) { // ISO-8859-1 문자열을 Unicode 문자열로 바꾸는 메서드 private String toUnicode(String str) { if (str == null) return null; byte[] b = str.getBytes( “ISO-8859-1 ”); return new String(b); catch (java.io.UnsupportedEncodingException uee) { System.out.println(uee.getMessage());
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>
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>
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>
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 모델 1으로 웹 애플리케이션 설계하고 구현하기
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 모델 1으로 웹 애플리케이션 설계하고 구현하기 애플리케이션을 실행하기 전에 마지막으로 해야 할 일은 사용하고 있는 JDBC API와 데 이터베이스 커넥션 풀을 위한 환경 설정이다.
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 모델 1으로 웹 애플리케이션 설계하고 구현하기 [그림 13-9] 예제 13-1, 예제 13-4의 실행 결과
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 다음과 같이 작동하는 애플리케이션을 모델 1을 이용해서 작성해보자.
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 앞의 그림처럼 작동하는 애플리케이션을 모델 2로 설계하면 다음과 같다.
2. 모델 1과 모델 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; }
2. 모델 1과 모델 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; }
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();
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 ”)); } list.setLastPage(true); catch (Exception e) { throw new ServletException(e); finally { try { stmt.close(); catch (Exception ignored) { conn.close(); return list;
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());
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} ”> <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> </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>
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 [그림 13-13] 예제 13-6의 서블릿 클래스를 등록하는 방법
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 [그림 13-15] 게시글 목록 보기 애플리케이션의 테스트를 위한 데이터 입력 방법
2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿 만들기 웹 템플릿을 만들기 위해 가장 먼저 해야 할 일은 웹 사이트를 구성하는 웹 페이지들의 공통부분을 추출해내는 것이다.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿 만들기 특별한 경우가 아니라면, 중앙의 가장 넓은 부분을 제외한 위쪽, 왼쪽, 오른쪽, 아래쪽에 공통 부분이 위치하는 것이 보통이다. 머리부 좌측 메뉴 몸체 꼬리부 [그림 13-18] 웹 템플릿의 구성 요소
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} ” /> </TR> </TABLE> <H5>Copyright@ 1993-2010 한빛미디어(주)</H5> </BODY> </HTML> [예제 13-9] 회사 소개 웹 페이지의 몸체 부분 <H4>회사 소개</H4> 한빛미디어(주)는 지난 15년 동안 국내 컴퓨터/정보통신 분야의 성장과 더불어 IT 전문가들의 풍부한 실무 경험과 현장 노하우를 책으로 출간하면서 해당 분야의 IT 개발자들과 함께 발전해 왔습니다. [그림 13-19] 웹 템플릿을 통해 출력한 회사 소개 웹 페이지
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] 웹 템플릿을 통해 출력한 게시판 글쓰기 웹 페이지
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞에서처럼 <jsp:include>액션을 이용해서 웹 템플릿에 몸체 부분을 포함시키는 방법은, 웹 애플리케이션의 실행 결과를 출력할 때는 통하지 않을 수도 있다. 게시판 읽기 애플리케이션의 경우에는 이 방법으로 올바른 결과를 얻을 수 있다.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 하지만 게시글 목록 보기 애플리케이션에 대해 똑같은 방법을 사용하면 다음과 같은 웹 템플릿 없이 결과가 나타난다.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞 페이지의 문제를 해결하려면 게시글 목록 보기 애플리케이션의 데이터 처리 로직과 데이터 출력 로직 사이에서 웹 템플릿이 실행되도록 만들면 된다. 게시글 목록 보기 애플리케이션은 모델 2로 작성되었기 때문에 이미 데이터 처리 로직 과 데이터 출력 로직으로 나누어서 모듈화되어 있다. 그러므로 [예제 13-6]의 서블릿 클래스 16행을 다음과 같이 수정하면 위 그림과 같이 작동하게 된다.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 수정된 게시글 목록 보기 애플리케이션은 다음과 같이 올바르게 작동한다. 1) [예제 13-6]의 URL을 입력하십시오. 2) 게시글 목록이 웹 템플릿을 통해 출력될 것입니다. [그림 13-24] 웹 템플릿을 통해 출력한 게시판 목록
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} ”> <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> </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}
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기 이번에는 다음과 같이 작동하는 애플리케이션을 작성해보자.
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>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기 로그인 버튼을 눌렀을 때 호출되는 로그인 애플리케이션은 다음과 같은 일을 해야 한다. 데이터 입력 : 아이디와 패스워드를 입력 받는다. 데이터 처리 : 입력 아이디에 해당하는 패스워드를 데이터베이스로부터 읽어서 입력된 패스워드 와 비교한다. 두 값이 동일하면 세션 데이터 영역에 로그인 상태를 저장한다. 데이터 출력 : 로그인에 성공하면 그림 13-26의 아래 왼쪽에 있는 메시지를, 실패하면 오른쪽에 있는 메시지를 출력한다. 로그인 결과가 웹 템플릿 안에 나타나도록 만들기 위해서 모듈의 실행 순서를 다음과 같 이 배치해야 한다.
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 } catch (Exception e) { throw new ServletException(e); finally { try { stmt.close(); catch (Exception ignored) { conn.close();
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>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 mysql.exe 프로그램을 이용해서 webdb 데이터베이스로 들어가세요 userinfo 테이블에 데이터를 입력하세요 [그림 13-29] 로그인 애플리케이션의 실행에 필요한 데이터 입력 방법
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기
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>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기 [그림 13-33] 예제 13-16, 예제 13-17의 실행 결과
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기 이번에는 웹 템플릿의 좌측 메뉴가 다음과 같이 작동하도록 만들어보자.
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} ” /> </TR> </TABLE> <H5>Copyright@ 1993-2010 한빛미디어(주)</H5> </BODY> </HTML>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 기능 추가하기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 창 만들기 이번에는 다음과 같이 작동하는 로그인/로그아웃 창을 만들어보자.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 창 만들기 앞 그림처럼 작동하는 로그인/로그아웃 창을 만들기 위해서 다음과 같은 모듈들이 필요 하다.
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>
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) { conn.close();
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); }
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} ” /> </TR> </TABLE> <H5>Copyright@ 1993-2010 한빛미디어(주)</H5> </BODY> </HTML>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 웹 템플릿에 로그인/로그아웃 창 만들기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기 마지막으로 다음과 같이 작동하는 장바구니 기능을 구현해보자.
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기 장바구니 기능을 구현하기 위해 필요한 애플리케이션 책 정보 보기 애플리케이션 장바구니 담기 애플리케이션 장바구니 관리 애플리케이션 책 정보 보기 애플리케이션 구성도는 다음과 같다.
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();
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 ”)); } booksInfo.setLastPage(true); catch (Exception e) { throw new ServletException(e); finally { try { stmt.close(); catch (Exception ignored) { conn.close(); return booksInfo;
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());
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> </TD> </TR> <c:forEach var= “cnt ” begin= “0 ” end= “${BOOKS_INFO.size - 1} ”> <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> </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>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기 장바구니 담기 애플리케이션의 구성도는 다음과 같다.
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); }
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>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기 다음은 장바구니 관리 애플리케이션 화면 설계와 구성도 이다. [그림 13-47] 장바구니 관리 애플리케이션의 화면 설계
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();
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); } catch (Exception e) { throw new ServletException(e); finally { try { stmt.close(); catch (Exception ignored) { conn.close(); return cartList; [예제 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();
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());
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} ”> <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> </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>
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} ” /> </TR> </TABLE> <H5>Copyright@ 1993-2010 한빛미디어(주)</H5> </BODY> </HTML>
3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 장바구니 기능 구현하기