DB와 연결하여 데이터 이동하기3(회원 가입 페이지)

회원가입 페이지로 이동, 회원가입 데이터 DB로 보내기

 

1. 회원가입 페이지 이동

나는 jsp에서 input 태그를 이용해서 클릭 시 가입페이지 이동 servlet으로 연결되도록 했다.

<input type="button" value="가입하기" onclick="location.href='memberJoinForm.me';">

1) Controller 

else if(command.equals("/memberJoinForm.me")) {

(따로 넘길 데이터가 없기 때문에 가입페이지로 넘어가도록 설정했다.)

page="member_join.jsp";
}

2) member_join.jsp.

input태그에서 받은 자료를 보낼 것이기 때문에 form태그로 감쌌다.

 

<form action="regMember.me" method="post">
<div>
아이디 : <input type="text" name="id" required>
</div>
<div>
비밀번호 : <input type="password" name="pw" required>
</div>
<div>
이름 : <input type="text" name="name" required>
</div>
<div></div>
<div>
나이 : <input type="text" name="age">
</div>
<div>
이메일 : <input type="text" name="email">
</div>
<div>
전화번호 : 
<input type="text" name="tell">
<input type="text" name="tell">
<input type="text" name="tell">
</div>

<div>
성별 : 
<input type="radio" name="gender" value="남" >남
<input type="radio" name="gender" value="여" checked>여 
</div>

<input type="submit" value="가입하기">
</form>

3) DAO

회원 가입 등록

방법은 두가지가 있다.

1) 메소드에 매개변수로 뭐들어갈지 작성하던가 아래와 같이 작성
public void insertMember(String id, String name, int age, String email, String tell, String gender, String pw) {

2) 매개변수 내용이 DTO에서 설정한 변수와 같으니

DTO member를 매개변수로 만들어 변수자료형 변수명 해서 작성 (나는 이 방법 사용)

 

public void insertMember(MemberDTO member) {

sql="INSERT INTO"
+ " MEMBER VALUES"
+ " (?"
+ ", ?"
+ ", ?"
+ ", ?"
+ ", ?"
+ ", ?"
+ ", ?)";

try {
 - 자바와 DB연결
conn = JDBCUtil.getConnection();

- 쿼리를 준비
stmt = conn.prepareStatement(sql);



- ?값 세팅 방법도 두가지이다
 i) 매개변수를 하나씩 넣었을 때
 stmt.setString(1, id);
stmt.setString(2, pw);
 stmt.setString(3, name);
 stmt.setInt(4, age);
 stmt.setString(5, email);

 stmt.setString(6, tell);
 stmt.setString(7, gender);

ii) member 객체로 했을 때 (나는 이 방법을 사용함)

input 태그로 memberDTO 변수로 set한 값을 getter 이용해서 return하고,

DB에는 새로운 값을 집어 넣는거니까 setString, SetInt 사용함



stmt.setString(1, member.getId());
stmt.setString(2, member.getPw());
stmt.setString(3, member.getName());
stmt.setInt(4, member.getAge());
stmt.setString(5, member.getEmail());
stmt.setString(6, member.getTell());
stmt.setString(7, member.getGender());

 - 쿼리를 실행
stmt.executeUpdate();

}catch(Exception e) {
e.printStackTrace();
}finally {
JDBCUtil.close(rs, stmt, conn);
}

}

 

 

4) controller

else if(command.equals("/regMember.me")) {

 - input 태그 데이터 받기

String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String [] tel = request.getParameterValues("tell");
String gender = request.getParameter("gender");
String email= request.getParameter("email");
String tell = tel[0] + "-" + tel[1] + "-" + tel[2];

우리가 만든 DAO가 곧바로 위의 값을 받을 수 없으니 매개변수로 설정해줘야 한다.
7개 내용 다 묶어서 보낼 수 있는 memberDTO 만든다.


MemberDTO member = new MemberDTO();

(input태그로 받은 내용을 우선 set해준다.)
member.setId(id);
member.setPw(pw);
member.setName(name);
member.setAge(age);
member.setTell(tell);
member.setGender(gender);
member.setEmail(email);

데이터 insert 작업 기능은 DAO가 담당하기에 DAO의 insert 메소드 실행시키겠다

두가지 방법 중 하나 선택해서 실행하면 된다. 

i) 매개변수랑 연결 
memberDAO.insertMember(id, name, age, email, tell, gender, pw);
 ii) 또는 다른 방법 (나는 DAO에 member 사용했다)
memberDAO.insertMember(member);

jsp로 가게되면 화면에서 제대로 구현 못함 
why? request.setAttribute 없기 때문에
memberList로 가서 실행시키도록 만든다.

조건. 팝업창이 뜨고 메인으로 가도록 설정

page = "insert_result.jsp";
}

 

5. 회원가입 알림 팝업창

위치는 title태그 아래에서 작성한다.

알림창은 script 태그를 이용한다.

 

<script type="text/javascript">
alert('🎉🎉회원가입이 완료되었습니다.🎉🎉');
location.href='memberList.me';



메인.jsp로 가게되면 화면에서 제대로 구현하지 못한다 why?

우리가 controller에 request.setAttribute 작성하지 않았기 때문에

 memberList.me로 가서 실행시키도록 만든다.

</script>

6. 메인 페이지