23.06.27 수업 정리2 (JSP / Java Server Pages)

1.

세상에 모든 웹페이지 화면을 로드 하는 요청은 GET 방식 이다.

 

2.

사용자에게, 데이터 값을 입력 받아서,

아이디가 admin 이고, 비밀번호가 1234 이면,

 

관리자 페이지로 넘어가면서,

환영합니다. 멘트를 출력 하고 싶음.

 

그 외의 아이디 이거나,

아이디는 admin 이지만, 비밀번호가 1234가 아니면,

아이디 또는 비밀번호를 다시 입력해주세요. 멘트를 출력 하고 싶음.

 

라는 예제 연습 풀이.

 

우선, 사용자에게 데이터 입력을 받기 위해서,

form 태그를 사용 했다.

 

아이디 / 비밀번호는 input 태그를 통해서 받고,

 

submit 버튼을 눌러서 원하는 페이지로, 데이터를 전송 시킨다.

 

 

 

전송 받은 데이터는,

input 태그 안에 name 속성의 값 ! 이랑 동일한 데이터명을 가진,

즉, "mid"랑 "mpw" 라는 데이터명을 가진것을 매개변수로 해서,

request 주체가 해당 mid 랑 mpw 가 가지는 데이터값을 get 한다.

 

그렇게 get한 값은 모두, String 타입으로 전송이 되었기 때문에,

String 타입으로 값을 받으면 된다.

 

그래서, 만약에 mid가 admin 이랑 같고, mpw가 1234 야?

 

그러면 관리자 페이지 라는 멘트를 출력 해줘 ~

 

그게 아닌 모든 경우 라면,

 

아이디 또는 비밀번호를 다시 입력해주세요. 라는 멘트를 출력 ~

 

 

11번 째 라인 부터 25번 째 라인은, 자바 언어 이기 때문에,

자바 언어를 사용한다는 것을 알려주기 위해서,

스크립트릿 내부에서 사용 한다.

 

 

 

3.

이번에는, 백엔드와 프론트를 분리 시켜서, 작성 하려고 한다.

 

위의 예제문은, 관리자 페이지.jsp 에서,

자바의 문법을 작성 했었는데,  무엇이 달라졌는지 확인 해보자.

 

아래의 예제를 확인 하기.

 

 

메인 화면은, 사용자 에게 아이디와 비밀번호의 데이터값을 받기 위한 form 태그를 확인 할 수 있다.

 

submit을 하면, 사용자에게 입력 받은 값,

즉, mid라는 이름을 가진 데이터값과, mpw라는 이름을 가진 데이터값을

action = "데이터를 전송할 곳"

처럼, action 속성을 사용해서, 데이터를 전송 시켜 준다.

 

현재 method = "post" 이기 때문에, post 방식으로 데이터를 전송 시켜 준다는 것을 알 수 있다.

 

 

이제, 데이터를 전송 받아서,

여기서는 받은 값을 가지고 무언가 사용하는 상황은 아니긴 하다.

 

Bean 클래스만 보고 넘어가면 될듯 하다.

 

 

관리자  페이지는 위와 같이 구성 되어 있다.

 

짚고 넘어갈 점은, 다음과 같다.

 

자바에서, 서로를 포함 관계로 놓을때, 객체를 선언하고 인스턴스화 했듯이,

자바와 JSP도 서로 그런 개념으로 놓고 사용 하면 된다.

 

JSP 에서의 객체 선언 표현식은 4번 라인과 같다.

 

<jsp:useBean id = "자바로 따지면 참조변수" class = "패키지명.클래스명" />

 

그리고,  자바 클래스의 멤버변수 / 프로퍼티 / 속성 을 set 해주기 위해서,

setter 을 불러오는 개념은 다음과 같다.

 

<jsp:setProperty property = "*" name = "자바로 따지면 참조변수" />

 

가져오고 싶은 setter가 특정 하게 존재 한다면, property 의 값을 와일드 카드가 아닌,

원하는 멤버변수명으로 설정 하면 된다.

 

내부의 Bean 클래스는 다음과 같다.

 

 

 

 

 

이 클래스에 멤버변수와 함수와 getter setter 모두 들어있는것을 확인 할 수 있다.

 

Bean 클래스는 위와 같이 구성 되어 있고,

 

우리는 이제 자바에서 해왔던 것처럼, VO와 DAO 클래스를 구분 해서 구현할 것이다.

 

아래부터는 VO와 DAO를 나눔..

 

4.

 

 

다음은, VO 클래스 이다.

 

2개의 멤버변수 / 속성 / 프로퍼티 == mid와 mpw

 

private 처리를 했으니, getter 와 setter

 

그리고, 생성자, 위는 생성자를 오버로딩 해놓은 모습이다.

 

마지막으로 toString 까지 되어있는 모습이다.

 

다음은 DAO 클래스 이다.

 

DAO를 DB와의 연결을 하면 JDBC 인터페이스를 구현 해야 하는데,

해당 예제에서는 간단히 데이터의 저장소를 자바의 배열리스트로 지정했다.

 

회원의 정보가 저장되어 있는 배열리스트에,

3개의 회원을 미리 add() 해놓은 모습을 볼 수 있다.

 

그리고,

회원가입은 insert 메서드이고,

회원목록 출력은 selectAll 메서드,

로그인은 selectOne 메서드 이다.

 

 

 

JSP 코드를 확인 하기.

 

 

회원 가입 을 안내하는 View 파트 이다.

 

script 태그 내부에 signup() 함수가 있는것을 확인할 수 있다.

 

아래의 form 태그 영역을 보자.

 

 

차례 대로 해석 해보자.

 

전송방식은 post, name은 test 이다.

 

input 태그 내부에 type 속성값은 hidden 이다. 즉, 사용자에게 보이지 않는다.

이때, name의 속성값은 action 이고, value는 login 으로 주었다.

 

>> 이부분 개념 복습하고, 질문 하기..

 

아이디 입력 받는 input 태그,

비밀번호 입력받는 input 태그가 있고,

 

회원가입을 하기 위한 버튼과,

 

로그인을 하기위한 submit 이 있다.

 

로그인은

아이디 비밀번호 입력 하고, submit을 누르면 mid의 값과 mpw 값이 post 방식으로 전송 된다.

 

회원가입은, 회원가입 버튼을 onclick 했을 때, signup() 이라는 함수가 실행되는 코드 이다.

 

signup() 함수는 위의 이미지 처럼, 다음과 같다.

 

confirm('하고싶은 말');

 

이 있다.

 

그것을 var ans 에 대입 하고,

 

ans 가 true 이면,

 

document.test.action.value = "signup";

document.test.submit();

 

>>

form 태그 내부에 있는 action 값이 signup이 될 수 있도록.

 

>>

그 상태로 submit 을 진행.

 

이고,

 

ans 가 false 이면,

return 하는 코드 이다.

 

>> 이 부분 개념 복습하고, 질문 하기..

 

 

회원 목록 출력은,

별도의 버튼 이나 이런걸 눌러야지 되게끔 구현하진 않고,

 

해당 웹페이지에서 상시 보이도록 구현 했다.

 

71번째 라인부터 80번째 라인 까지 자바 언어 이기 때문에, 스크립트릿 내부에 구현.

 

<ul> 태그 내부에 <li> 태그로 회원 목록을 출력 시키고 싶은 상황이고,

 

주석을 한 out.println() 처럼, 반복문 내부에 작성 해도 되고,

 

아니면, 

<li> </li> 태그를 직접 사용 해서, 구현할 수도 있다.

 

대신에, 향상된 for문에서 참조변수로 사용되는 v는 자바 언어의 것이므로,

 

77번째 라인 처럼, 스크립트릿 외부에서 <li> 태그를 작성하고,

v는 표현식에 가둬야 한다.

 

표현 방법의 차이이니, 편한 방법으로 사용 하면 될듯 하다.

 

 

 

 

admin 아이디가 중복이라 실패.