설계 모델과 웹 템플릿

1. 13 설계 모델과 웹 템플릿

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

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

4. JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2 모델 1은 웹 애플리케이션을 두 종류의 모듈로 나누어 각각 JSP 페이지와 자바빈 클래스로 구현하도록 제안한다. JSP 페이지는 데이터의 입력과 출력을 담당한다. 자바빈 클래스는 데이터 처리를 담당한다. 1. 설계 모델과 웹 템플릿에 대하여

5. 1. 설계 모델과 웹 템플릿에 대하여 • JSP와 서블릿 기반의 설계 모델 – 모델 1과 모델 2 • 모델 2는 웹 애플리케이션을 세 종류의 모듈로 나누어서 각각 서블릿 클래스, JSP 페이지, 자바빈 클래스로 구현하도록 제안하고 있다. • 서블릿 클래스는 데이터 입력과 데이터 처리를 담당한다. • JSP 페이지는 데이터 출력을 담당한다. • 자바빈 클래스는 서블릿 클래스가 JSP 페이지로 넘겨주는 데이터를 포장하는 일만 한다.

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

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

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

9. 2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 • 모델 1으로 웹 애플리케이션 설계하고 구현하기 • 모델 1에 따라 앞의 애플리케이션을 모듈화하면 다음과 같다. • 위 두 모듈의 코딩에 들어가기에앞서 이 애플리케이션의 실행에 필요한 게시판 테이블을 다음과 같이 설계하자.

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

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

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

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

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

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

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

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

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

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

20. 2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 • 모델 2로 웹 애플리케이션 설계하고 구현하기 • 모델 2에서는 자바빈 클래스에데이터를 처리하는 복잡한 로직이 포함되지 않으므로 생성자와 get-메서드, set-메서드만 있으면 된다. • 하나의 자바빈에 똑같은 이름의 프로퍼티가 여러 개를 있을 경우에는 set-메서드의 첫 번째 파라미터로 인덱스 값을 받도록 만들거나, 모든 프로퍼티 값을 포함한 배열을 파라미터로 넘겨주는 방법을 사용해야 한다.

21. 2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 • 모델 2로 웹 애플리케이션 설계하고 구현하기 • get-메서드의 작성 방법도 두 가지 인데하나는 인덱스 값을 파라미터로 받는 방법이고, 다른 하나는 모든 프로퍼티 값이 들어 있는 배열을 통째로 리턴하는 방법이다.

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

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

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

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

26. 2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 • 모델 2로 웹 애플리케이션 설계하고 구현하기 [그림 13-13] 예제 13-6의 서블릿 클래스를 등록하는 방법

27. 2. 모델 1과 모델 2로 웹 애플리케이션 설계하고 구현하기 [그림 13-15] 게시글 목록 보기 애플리케이션의 테스트를 위한 데이터 입력 방법

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

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

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

31. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿 만들기 [그림 13-19] 웹 템플릿을 통해 출력한 회사 소개 웹 페이지

32. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿 만들기 [그림 13-20] 웹 템플릿을 통해 출력한 게시판 글쓰기 웹 페이지

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

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

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

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

37. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기

38. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿으로 웹 애플리케이션의 실행 결과 출력하기

39. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기 • 이번에는 다음과 같이 작동하는 애플리케이션을 작성해보자.

40. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기 • 로그인 입력 화면은 다음과 같은 HTML문서로 구현할 수 있다.

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

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

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

44. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 mysql.exe 프로그램을 이용해서 webdb 데이터베이스로 들어가세요 userinfo테이블에 데이터를 입력하세요 [그림 13-29] 로그인 애플리케이션의 실행에 필요한 데이터 입력 방법

45. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기

46. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기 • 로그아웃 애플리케이션의 구성도는 다음과 같다.

47. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기

48. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기 [그림 13-33] 예제 13-16, 예제 13-17의 실행 결과

49. 웹 템플릿에 로그인/로그아웃 기능 추가하기 이번에는 웹 템플릿의 좌측 메뉴가 다음과 같이 작동하도록 만들어보자. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기

50. 3. 웹 템플릿으로 일관된 사용자 인터페이스 만들기 • 웹 템플릿에 로그인/로그아웃 기능 추가하기