[JSP] JSP 액션태그 useBean, setProperty, getProperty 활용: 회원가입 홈페이지 데이터 전달 / Js 유효성검사 연결

이전 글에서는 자바 빈즈에 대한 개략적인 설명과 JSP 액션태그 useBean, setProperty, getProperty를 사용한 예제를 보았다.

 

이번 글에서는 이전 글에서 본 개념을 응용해본다.

 

---

우선 페이지부터 보자.

페이지 1

페이지 2

이번 예제를 개략적으로 설명하자면,

다음과 같은 회원가입 홈페이지에 입력된 값들을 전부 받아와서 beans에 저장한 뒤 그 저장한 값들을 페이지 2에 나타나도록 한다.

---

 

회원가입 홈페이지.jsp

[09] css 파일 연결

[12] 주소 API와 유효성검사 메서드가 담긴 js 파일 연결

[14] 이 폼의 제출버튼 즉 회원가입(submit) 버튼을 누르게 되면 onsubmit을 통해 유효성검사 메서드를 불러 사용한다. 

유효성검사를 통과한 폼은 action을 통해 확인용(출력)페이지로 값을 전달한다.

 

 

출력페이지.jsp

 

[05] jsp:useBean 태그 사용, 매개변수와 값을 얻어오는 범위, java 클래스 패키지 경로를 써준다.

[06] jsp:setProperty 태그 사용. 매개변수의 이름을 통해 값들을 가져온다.

그 이후에는 표를 그려 그 안에 값들을 알아볼 수 있게 하였다.

각각 해당하는 값들을 jsp:getProperty 태그를 사용, property에 지정된 이름을 불러오면 값이 얻어진다.

[58] 관심분야의 경우 체크박스를 통해 여러 값을 가져오게 되어 있다. 따라서 배열의 형태로 잡아준 것을 향상 for문(for each문)을 통해 전부 출력해준다.

자바 빈즈 클래스

멤버변수들은 전부 소중한 개인정보 데이터이기 때문에! 외부에서 접근할 수 없도록 private으로 선언해준다.

그리고 변수를 다 설정해두었다면 getters&setters를 이용해 자동으로 getter와 setter를 생성해준다.

위에서 언급했던 관심분야(hobby)의 경우, 배열타입으로 선언해주어야 두 번째(출력)페이지에서 오류가 나지 않는다.

---

CSS(스킨)와 Js(유효성검사)파일들은 따로 올리지는 않겠다.