8월 20일 Servlet & JSP

JDBC 유틸리티 클래스 작성

Connection 관련 기능을 유틸리트 클래스로 분리하면 데이터베이스가 변경되는 상황이 발생하더라도 대응하기가 쉽다.

그리고 여러 파일에 반복적으로 작성되는 Connection 관련 코드를 제거할 수 있다.

 

 

 

JDBCUtill을 이용한 INSERT

H2 데이터베이스로부터 Connection을 획득하는 코드를 JDBCUtil.getConnection() 메소드로 대체했으며, finally 블록에 있던 연결 해제 역시 JDBCUtil.close() 메소드로 변경했다.

 

 

 

JDBCUtil을 이용한 UPDATE

 

 

 

JDBCUtil을 이용한 DELETE

 

 

 

데이터 조회

JDBCUtil을 이용한 SELECT

 

회원 목록을 검색하는 프로그램 작성

결과

 

 

 

ResultSet 구조

실행 결과

ResultSet 객체에 있는 검색 결과를 사용할 때는 컬럼의 이름과 데이터 타입을 확인해야 한다 

이름(NAME) 컬럼의 데이터 타입은 문자(VARCHAR)이다. 따라서 ResultSet 의 getString("NAME")메소드를 사용해야 한다. 만약 숫자 타입(NUMBER)의 데이터 타입이라면 getlnt()나 getDouble()로 처리해야 한다.

 

 

*검색 응용

회원 테이블에서 권한이 'ADMIN'인 회원만 조회하는 프로그램 작성

실행 결과

 

 

 

DAO(Data Access Object) 패턴 적용

 

DAO 클래스 작성

데이터베이스에 접근하여 실질적인 데이턴베이스 연동 작업을 담당하는 클래스

UserDAO 클래스 작성

값도 위에서 했던 것과 동일하게 나온다

이렇게 DAO 클래스를 작성하면 메소드만 호출하면 되기 때문에 코드의 재사용성 측면에서도 매우 효율적이다.

 

 

 

DAO를 이용한 INSERT

 

 

 

DAO를 이용한 UPDATE

 

 

 

DAO를 이용한 DELETE

 

 

 

VO 패턴 적용

 

매개변수와 유지보수

메소드에 매개변수가 많으면 프로그램의 유지보수를 어렵게 만든다. 매개변수가 많은 메소드가 어떤 문제를 발생시키는지 간단한 실습을 진행해보자.

메소드를 호출할 때는 호출되는 메소드의 매개변수 개수와 타입을 반드시 확인해야 한다.

결국 매개변수가 많은 메소드를 호출하는 거슨 문제가 발생할 가능성이 크다는 것을 의미한다.

 

 

 

VO 클래스 작성

메소드의 매개변수는 적을수록 좋다. VO는 여러개의 매개변수를 사용하는 메소드에 대해서 매개변수를 하나로 통합하는 역할을 한다.

private 멤버 변수에 접근할 수 있는 public, Getter, Setter 메소드를 작성하자, 작성할 때는 이클립스의 소스 생성 기능을 이용한다.

 

 

 

VO 클래스 적용

 

 

 

UPDATE 메소드에 적용

 

 

 

SELECT 메소드에 적용

 

새로운 메소드를 만들다 보면 비슷한 모양의 메소드가 반복적으로 작성되고, 결국 목록과 관련된 메소드가 너무 많아 져서 관리하기가 어려워진다.

이런 문제를 해결하려면 목록 기능의 메소드에서는 검색 결과를 직접 처리하지 않고, 메소드를 호출한 곳으로 검색 결과를 리턴하면 된다.

 

 

 

 

사용자 요청 처리

텍스트 필드

HTML, 이미지, CSS, 자바스크립트, JSP같은 웹 리소스는 모두 src/main/webapp 폴더에 작성한다.

 

 

 

 

텍스트 에어리어

한 줄의 텍스트를 입력받기 위해서 텍스트 필드를 사용한다면 여러 줄의 텍스트를 입력받기 위해서는 <textarea> 태그를 사용한다

출력 결과

 

 

 

라디오 버튼

사용자가 선택할 수 있는 몇 가지 보기를 제공하고, 보기 중에서 하나의 항목을 선택하게 할 경우에 라디오 버튼을 사용한다.

출력 결과

라디오 버튼은 여러 항목 중에서 하나만 선택하도록 제어할 때 사용하는데, 현재는 USER와 ADMIN을 모두 선택할 수 있다. 이를 방지하려면 name 속성을 추가해야 한다.

모두 선택되는 라디오버튼

 

 

 

체크박스

체크 박스는 여러 항목 중에서 여러 개를 다중 선택할 때 사용한다. 체크 박스 역시 라디오 버튼과 마찬가지로  <input> 태그를 사용한다.

 

 

 

셀렉트 박스

셀렉트 박스는 라디오 버튼처럼 여러 항목 중에서 하나만 선택하도록 할 때 사용하는데, 라디오 버튼처럼 모든 항목을펼쳐서 제공하는 것이 아니라 셀렉트 박스를 눌렀을 때만 사용자에게 선택할 수 있는 항목을 제공한다.

 

 

 

버튼

화면을 구성할 때 버튼이 필요한 경우, 역시 <input> 태그를 사용하여 처리한다.

현재 상태에서 <회원가입> 버튼을 눌러도 서버에 사용자의 요청이 전달되지 않는다, <취소> 버튼을 눌러도 입력한 데이터가 초기화되지 않는다. 이 두 버튼이 정상적으로 동작하기 위해서는 사용자의 입력 정보를 다음과 같이 <form> 태그로 감싸야 한다.

회원가입 화면 전체를

태그로 감쌌다. 그리고 action 속성을 insertUser.do 로 설정했으므로 <회원가입> 버튼을 클릭하면 서버에 insertUser.do 요청을 전달한다. 이 때 사용자가 입력한 데이터가 같이 전달된다.

회원가입 화면 전체를 <form> 태그로 감쌌다. 그리고 action 속성을 insertUser.do 로 설정했으므로 <회원가입> 버튼을 클릭하면 서버에 insertUser.do 요청을 전달한다. 이 때 사용자가 입력한 데이터가 같이 전달된다.

404 응답 상태는 서버에 insertUser.do 요청에 해당하는 서블릿이 없어서 발생한 에러이다. 하지만 <취소> 버튼은 정상적으로 동작한다.

 

 

 

테이블 태그

지금까지 만든 회원가입 화면에서 화면 전체가 왼쪽으로 치우쳐 있다는 것과 입력 항목들이 들쭉날쭉하게 배치되어 있다.

이런 경우 <table> 태그를 이용하여 화면을 좀 더 보기 좋게 만들 수 있다.

 

<table> 태그는 <tr>과 <th>, 또는 <td> 태그를 함께 사용한다.

<tr>은 테이블의 가로줄에 해당하는 행을 추가할 때 사용한다

<th>나 <td>는 하나의 행을 여러 칸으로 나눌 때 사용한다.

<table> 태그에서는 border 속성을 추가하여 테이블의 경계선이 보이도록 했고, 두개의 버튼이 등록된 마지막 <td> 에서는 colspan 속성을 이용하여 하나의 <td>로 두 개의<td>공간을 사용하도록 했다. 그리고 align 속성을 이용하여 버튼의 위치를 가운데로 정렬했다.