13 설계 모델과 웹 템플릿.

13 설계 모델과 웹 템플릿

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

1. 설계 모델과 웹 템플릿에 대하여 JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2
JSP 규격서의 초기 버전에서 소개하고 있는 설계 모델(design model)인 모델 1과 모델 2 는 웹 애플리케이션이 해야 할 일을 다음 세가지로 구분하여 모듈화하는 방법을 제시하 고 있다. 데이터 입력 데이터 처리 데이터 출력 모델 1은 비교적 간단한 웹 애플리케이션에 적합한 설계 모델이고, 모델 2는 비교적 복 잡한 웹 애플리케이션에 적합한 설계 모델이다.

자바빈 클래스는 데이터 처리를 담당한다.

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

1. 설계 모델과 웹 템플릿에 대하여 사용자 인터페이스에 일관성을 부여하는 웹 템플릿
웹 사이트 외관의 일관성을 위해서는 여러 웹 페이지들 간에 공통되는 부분의 코드를 추 출해서 단일 파일로 유지하는 것이 좋다. 이런 파일을 웹 템플릿(web template)이라고 부 른다. 웹 템플릿은 HTML과 JSP의 문법을 이용해서 작성할 수 있고, 웹 페이지마다 달라져야 하는 부분은 <jsp:include> 표준 액션을 이용해서 외부 파일로부터 불러오면 된다.

1. 설계 모델과 웹 템플릿에 대하여 사용자 인터페이스에 일관성을 부여하는 웹 템플릿

2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기
모델 1으로 웹 애플리케이션 설계하고 구현하기 다음과 같이 작동하는 애플리케이션을 모델 1을 이용해서 작성해보자. 위 애플리케이션은 다음과 같은 일을 해야 한다. 데이터 입력 - 웹 브라우저로부터 입력된 게시글의 순번을 받는다. 데이터 처리 - 그에 해당하는 게시글을 데이터베이스로부터 읽는다. 데이터 출력 - 그 결과를 HTML 코드로 만들어서 웹 브라우저로 출력한다. ① URL과 함께 게시글의 순번을 입력하면 ② 데이터베이스에 있는 게시글의 내용이 출력됩니다. [그림 13-4] 게시글 읽기 애플리케이션의 작동 방식

모델 1으로 웹 애플리케이션 설계하고 구현하기 모델 1에 따라 앞의 애플리케이션을 모듈화하면 다음과 같다. 위 두 모듈의 코딩에 들어가기에 앞서 이 애플리케이션의 실행에 필요한 게시판 테이블 을 다음과 같이 설계하자. 테이블 이름: 게시판 테이블 (bbs) 한글 항목명 영문 항목명 타입 크기 순번 seqno integer 8 제목 title varchar 50 내용 content 500 작성자 writer 20 저장일자 wdate date 3 저장시각 wtime time

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

try { conn.close(); } catch (Exception ignored) { // ISO 문자열을 Unicode 문자열로 바꾸는 메서드 private String toUnicode(String str) { if (str == null) return null; byte[] b = str.getBytes( “ISO ”); return new String(b); catch (java.io.UnsupportedEncodingException uee) { System.out.println(uee.getMessage());

모델 1으로 웹 애플리케이션 설계하고 구현하기 [예제 13-2] 게시글을 출력하는 JSP 페이지 - 스크립팅 요소를 사용한 경우 contentType= “text/html; charset=euc-kr ”%> 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>

모델 1으로 웹 애플리케이션 설계하고 구현하기 [예제 13-3] 게시글을 출력하는 JSP 페이지 - 표준 액션을 사용한 경우 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>

모델 1으로 웹 애플리케이션 설계하고 구현하기 [예제 13-4] 게시글을 출력하는 JSP 페이지 - 익스프레션 언어를 사용한 경우 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>

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

모델 1으로 웹 애플리케이션 설계하고 구현하기 애플리케이션을 실행하기 전에 마지막으로 해야 할 일은 사용하고 있는 JDBC API와 데 이터베이스 커넥션 풀을 위한 환경 설정이다.

모델 1으로 웹 애플리케이션 설계하고 구현하기 [그림 13-9] 예제 13-1, 예제 13-4의 실행 결과

다음과 같이 작동하는 애플리케이션을 모델 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; }

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

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

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

// ISO 문자열을 Unicode 문자열로 바꾸는 메서드 private String toUnicode(String str) { if (str == null) return null; try { byte[] b = str.getBytes(“ISO ”); return new String(b); } catch (java.io.UnsupportedEncodingException uee) { System.out.println(uee.getMessage());

[예제 13-7] 게시글 목록을 출력하는 JSP 페이지 - EL 식과 JSTL 라이브러리 사용 contentType= “text/html; charset=euc-kr ”%> prefix= “c ” uri= “ ” %> <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>

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

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

3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기
웹 템플릿 만들기 웹 템플릿을 만들기 위해 가장 먼저 해야 할 일은 웹 사이트를 구성하는 웹 페이지들의 공통부분을 추출해내는 것이다.

웹 템플릿 만들기 특별한 경우가 아니라면, 중앙의 가장 넓은 부분을 제외한 위쪽, 왼쪽, 오른쪽, 아래쪽에 공통 부분이 위치하는 것이 보통이다. 머리부 좌측 메뉴 몸체 꼬리부 [그림 13-18] 웹 템플릿의 구성 요소

웹 템플릿 만들기 [예제 13-8] 웹 템플릿의 예 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> </BODY> </HTML> [예제 13-9] 회사 소개 웹 페이지의 몸체 부분 <H4>회사 소개</H4> 한빛미디어(주)는 지난 15년 동안 국내 컴퓨터/정보통신 분야의 성장과 더불어 IT 전문가들의 풍부한 실무 경험과 현장 노하우를 책으로 출간하면서 해당 분야의 IT 개발자들과 함께 발전해 왔습니다. [그림 13-19] 웹 템플릿을 통해 출력한 회사 소개 웹 페이지

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

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞에서처럼 <jsp:include>액션을 이용해서 웹 템플릿에 몸체 부분을 포함시키는 방법은, 웹 애플리케이션의 실행 결과를 출력할 때는 통하지 않을 수도 있다. 게시판 읽기 애플리케이션의 경우에는 이 방법으로 올바른 결과를 얻을 수 있다.

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

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 앞 페이지의 문제를 해결하려면 게시글 목록 보기 애플리케이션의 데이터 처리 로직과 데이터 출력 로직 사이에서 웹 템플릿이 실행되도록 만들면 된다. 게시글 목록 보기 애플리케이션은 모델 2로 작성되었기 때문에 이미 데이터 처리 로직 과 데이터 출력 로직으로 나누어서 모듈화되어 있다. 그러므로 [예제 13-6]의 서블릿 클래스 16행을 다음과 같이 수정하면 위 그림과 같이 작동하게 된다.

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 수정된 게시글 목록 보기 애플리케이션은 다음과 같이 올바르게 작동한다. 1) [예제 13-6]의 URL을 입력하십시오. 2) 게시글 목록이 웹 템플릿을 통해 출력될 것입니다. [그림 13-24] 웹 템플릿을 통해 출력한 게시판 목록

웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기 [예제 13-11] 게시글 목록을 출력하는 JSP 페이지 - 게시글 읽기 애플리케이션에 대한 링크가 추가된 버전 contentType= “text/html; charset=euc-kr ”%> prefix= “c ” uri= “ ” %> <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 페이지 - 웹 템플릿에 적합한 버전 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}

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

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

웹 템플릿에 로그인/로그아웃 기능 추가하기 로그인 입력 화면은 다음과 같은 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>

웹 템플릿에 로그인/로그아웃 기능 추가하기 로그인 버튼을 눌렀을 때 호출되는 로그인 애플리케이션은 다음과 같은 일을 해야 한다. 데이터 입력 : 아이디와 패스워드를 입력 받는다. 데이터 처리 : 입력 아이디에 해당하는 패스워드를 데이터베이스로부터 읽어서 입력된 패스워드 와 비교한다. 두 값이 동일하면 세션 데이터 영역에 로그인 상태를 저장한다. 데이터 출력 : 로그인에 성공하면 그림 13-26의 아래 왼쪽에 있는 메시지를, 실패하면 오른쪽에 있는 메시지를 출력한다. 로그인 결과가 웹 템플릿 안에 나타나도록 만들기 위해서 모듈의 실행 순서를 다음과 같 이 배치해야 한다.

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

[예제 13-15] 로그인 결과를 출력하는 JSP 페이지 contentType= “text/html; charset=euc-kr ”%> prefix= “c ” uri= “ ” %> <H4>로그인</H4> <c:choose> <c:when test= “${param.LOGIN_RESULT == ‘SUCCESS ’} ”> 로그인이 되었습니다. <BR> 안녕하세요 ${sessionScope.LOGIN_ID}님. </c:when> <c:otherwise> 로그인에 실패했습니다. <BR> 아이디와 패스워드를 체크하세요. </c:otherwise> </c:choose>

mysql.exe 프로그램을 이용해서 webdb 데이터베이스로 들어가세요 userinfo 테이블에 데이터를 입력하세요 [그림 13-29] 로그인 애플리케이션의 실행에 필요한 데이터 입력 방법

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

웹 템플릿에 로그인/로그아웃 기능 추가하기 로그아웃 애플리케이션의 구성도는 다음과 같다. [예제 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 페이지 contentType= “text/html; charset=euc-kr ”%> prefix= “c ” uri= “ ” %> <H4>로그아웃</H4> <c:choose> <c:when test= “${param.LOGOUT_RESULT == ‘SUCCESS ’} ”> 로그아웃이 되었습니다. <BR> </c:when> <c:otherwise> 로그아웃에 실패했습니다. <BR> </c:otherwise> </c:choose>

웹 템플릿에 로그인/로그아웃 기능 추가하기 [그림 13-33] 예제 13-16, 예제 13-17의 실행 결과

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

웹 템플릿에 로그인/로그아웃 기능 추가하기 [예제 13-18] 로그인/로그아웃 메뉴가 있는 웹 템플릿 contentType= “text/html; charset=euc-kr ” %> prefix= “c ” uri= “ ” %> <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> </BODY> </HTML>

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

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

웹 템플릿에 로그인/로그아웃 창 만들기 [예제 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 페이지 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>

웹 템플릿에 로그인/로그아웃 창 만들기 [예제 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();

웹 템플릿에 로그인/로그아웃 창 만들기 [예제 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); }

웹 템플릿에 로그인/로그아웃 창 만들기 [예제 13-23] 로그인/로그아웃 메뉴가 있는 웹 템플릿 contentType= “text/html; charset=euc-kr ” %> prefix= “c ” uri= “ ” %> <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> </BODY> </HTML>

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

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

장바구니 기능 구현하기 장바구니 기능을 구현하기 위해 필요한 애플리케이션 책 정보 보기 애플리케이션 장바구니 담기 애플리케이션 장바구니 관리 애플리케이션 책 정보 보기 애플리케이션 구성도는 다음과 같다.

장바구니 기능 구현하기 [예제 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();

장바구니 기능 구현하기 [예제 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;

장바구니 기능 구현하기 // ISO 문자열을 Unicode 문자열로 바꾸는 메서드 private String toUnicode(String str) { if (str == null) return null; try { byte[] b = str.getBytes(“ISO ”); return new String(b); } catch (java.io.UnsupportedEncodingException uee) { System.out.println(uee.getMessage());

장바구니 기능 구현하기 [예제 13-26] 책 정보 목록을 출력하는 JSP 페이지 contentType= “text/html; charset=euc-kr “%> prefix= “c ” uri= “ ” %> <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>

장바구니 기능 구현하기

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

장바구니 기능 구현하기 [예제 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); }

장바구니 기능 구현하기 [예제 13-29] 장바구니 담기의 결과를 보여주는 JSP 페이지 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>

장바구니 기능 구현하기 다음은 장바구니 관리 애플리케이션 화면 설계와 구성도 이다. [그림 13-47] 장바구니 관리 애플리케이션의 화면 설계

장바구니 기능 구현하기 [예제 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();

장바구니 기능 구현하기 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();

장바구니 기능 구현하기 // ISO 문자열을 Unicode 문자열로 바꾸는 메서드 private String toUnicode(String str) { if (str == null) return null; try { byte[] b = str.getBytes( “ISO ”); return new String(b); } catch (java.io.UnsupportedEncodingException uee) { System.out.println(uee.getMessage());

장바구니 기능 구현하기 [예제 13-32] 장바구니 목록을 출력하는 JSP 페이지 contentType= “text/html; charset=euc-kr ”%> prefix= “c ” uri= “ ” %> <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>

장바구니 기능 구현하기 [예제 13-33] 장바구니 메뉴가 있는 웹 템플릿 contentType= “text/html; charset=euc-kr ” %> prefix= “c ” uri= “ ” %> <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> </BODY> </HTML>

장바구니 기능 구현하기

13 설계 모델과 웹 템플릿.

Similar presentations

Presentation on theme: "13 설계 모델과 웹 템플릿."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

13 설계 모델과 웹 템플릿.

Similar presentations

Presentation on theme: "13 설계 모델과 웹 템플릿."— Presentation transcript:

Similar presentations

About project

지원