본문 바로가기
✨ Back-end/Servlet

[Servlet / JSP / SQL] 회원 관리 폼 만들기 (1) - CREATE (DB 테이블 생성)

by 환풍 2023. 2. 22.
728x90
반응형

프로젝트 파일 코드 최종본

MybatisMember.zip
6.64MB

 

 


webapp 파일에 첫 시작 화면인 index.jsp를 시작으로 

회원 가입, 로그인, 로그인 결과, 회원 리스트, 회원 상세정보, 회원 삭제, 회원 업데이트 기능을 만들었다.

데이터 베이스를 이용하여 CRUD 게시판을 만들어보는 과정이다. 나중에 보았을때에도 헷갈리지 않도록 지금 내가 생각하고 있는 내용을 최대한 자세히 적어볼 것이다.

 

시작전, 먼저 JavaResources 폴더의 src/main/java에서 controller, dto, service, sqlmap 패키지를 만들었고,

각각 알맞는 인터페이스와 클래스 생성, 그리고 xml파일을 가지고왔다.

 

처음 시작은 webapp 폴더에서 index.jsp 파일을 만들었다.

 

index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="loginForm.do"></jsp:forward>
</body>
</html>
cs

<jsp:forwardpage="loginForm.do"></jsp:forward> 를 써주어 프로젝트 실행과 동시에 loginForm.do로 가도록 세팅해주었다. loginForm.do는 controller 패키지에서 서블릿으로 만들어주었다.

 

MemberController.java (서블릿)

index.jsp가 실행되면 위 컨트롤러에서 login.jsp로 이동시켜준다.

 

본격적으로 데이터 값들을 입력받기 전에, 데이터 정보가 담겨있는 클래스 하나를 생성해준다.

src/main/java안에 있는 dto 패키지에서 MemberDTO.java 클래스를 생성해주자.

MemberDTO.java 클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package dto;
 
public class MemberDTO {
    private String memId;
    private String memPw;
    private String memName;
    private String gender;
    private String createDate;
    private String intro;
    
    public String getMemId() {
        return memId;
    }
    public void setMemId(String memId) {
        this.memId = memId;
    }
    public String getMemPw() {
        return memPw;
    }
    public void setMemPw(String memPw) {
        this.memPw = memPw;
    }
    public String getMemName() {
        return memName;
    }
    public void setMemName(String memName) {
        this.memName = memName;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String getCreateDate() {
        return createDate;
    }
    public void setCreateDate(String createDate) {
        this.createDate = createDate;
    }
    public String getIntro() {
        return intro;
    }
    public void setIntro(String intro) {
        this.intro = intro;
    }
}
 
cs

회원아이디, 비밀번호, 이름, 성별, 가입날짜, 자기소개를 바탕으로 클래스안에 변수들을 선언했다.

이후 gettersetter 메소드를 만들었다. 생성자X

 

login.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login.do" method="post">
    아이디 <input type="text" name="memId"> <br>
    비번 <input type="password" name="memPw"> <br>
    <input type="submit" value ="로그인">
    <input type="button" value="회원가입" onclick="location.href='joinForm.do';"> 
</form>
</body>
</html>
cs

login.jsp를 생성한 후 아이디와 비밀번호를 입력할 수 있는 input 태그를 생성하고, 각각 name값을 주었다.

이때 name값은 dto 패키지안에 있는 클래스에서 만든 값을 주자. 이후 로그인과 회원가입 버튼을 만들었고,

로그인을 누르면 서블릿 login.do로 이동, 회원가입을 누르면 서블릿 joinForm.do로 이동하게 만들었다.

이때, 반드시 form 태그 안에 가도록 구성해야한다. 아니면 실행안됨..

 

먼저, 로그인 버튼을 눌러 컨트롤러 패키지 안에 있는 서블릿으로 이동한다.

MemberController.java 서블릿

login.jsp에서 name값으로 입력받아온 memId(아이디)와 memPw(비밀번호)를 문자열로 받아왔다.

dto패키지에 있는 MemberDTO 클래스로 meber라는 새로운 객체를 생성해줄 수 있다.

이후 입력받아온 memId와 memPw 값으로 세팅해주었다. 일단 여기까지만 하고, 다시 다른걸 해야한다.

 

만들었던 service 패키지로 들어가 클래스인터페이스를 만들어야한다.

MemberService.java 라는 인터페이스를 만들고, MemberServiceImpl.java 라는 클래스를 만들어

MemberServiceImpl를 implements 시켜주자.

 

그리고 sqlmap 패키지에서도 만질 것이 있다.

 

위 두개는 복붙으로 가지고오고, member-mapper.xml만 만질 예정이다.

복붙과정에서 configuration.xml 파일에 들어가 

위와 같이 resource 이름 mapper를 똑같이 바꾸어주자.

 

기본적인 세팅이 끝났으니, 바로 데이터베이스로 연동시켜보고자한다.

 

webapp 밑에 있는 lib파일안에

위 파일들이 모두 들어있는지 확인하자. 

Oracle

오라클로 들어가 MYDB계정에서 BASIC_MEMBER 테이블을 생성한다.

아까 클래스에서 만들었던 변수 이름과 유사하게 만들어줘야 안헷갈린다.

다 만들었으면 테이블을 생성한다. ( Ctrl + Enter)

 

이후 본격적으로 데이터베이스와 이클립스를 연동시켜 데이터를 주고 받을 것이다.

sqlmap 패키지에서 member-mapper.xml로 들어온다.

이곳에서 모든 쿼리를 작성해줄 수 있다.

Oracle에서 만든 데이터들을 resultMap type=" " 이 안에 적어준다.

BASIC_MEMBER라는 컬럼 데이터를 dto.MemberDTO 값으로 받아 올거에요~ 라는 뜻이다. 

이때, 모든 컬럼을 하나하나 전부 연결시켜줘야한다.

member-mapper.xml

클래스의 memId 변수 값을 Oracle에서 생성한 MEM_ID 컬럼 값으로 받아온다. 아래도 모두 똑같다.

다만, 기본키로 설정한 MEM_ID 컬럼은 result대신 id를 써준다.

여기까지가 mapper를 하며 이클립스에서 데이터베이스와 연동시켜주는 초기 세팅이다.

 

이후 로그인 쿼리는 일반 SQL처럼 쓰면 되지만, 조건을 줄 때 조금 달라진다.

데이터베이스 컬럼 값과 자바 변수 값을 비교할 때, 자바 변수 값으로 #{memId}와 같이 #{클래스객체명}을 준다.

**select 쿼리에만 id설정 후 resultMap을 넣어준다. resultMap 값은 위에서 설정한 id 값을 받아온다.

여기까지 왔다면, SQL문과 비교할 자바 변수 값으로 넣어준 #{클래스객체명} 이걸 어떻게 넣어주냐가 의문일 것이다.

 

service 패키지에서 인터페이스로 만든 MemberService으로가자.

MemberService.java 인터페이스

//매개변수 및 리턴 타입 결정 방법(우선적으로 실행 시 쿼리를 작성)
//매개변수 : 쿼리 실행 시 빈 값을 채울 용도
//1. 쿼리에서 채워 줄 값이 없을 경우 : 매개변수 없음
//2. 채워줄 값이 하나일 경우
// 2-1) 채워줄 값이 숫자인 경우 : 매개변수 int형 하나
.// 2-2) 채워줄 값이 문자인 경우 : 매개변수 String형 하나
//3. 채워줄 값이 여러개인 경우 : 매개변수는 DTO 객체.
// 리턴타입 : 쿼리 실행 결과를 어떻게 받아올지에 대한 정의
// INSERT, UPDATE, DELETE 쿼리 실행 결과는
// 리턴타입을 int 혹은 void 사용하면됨.
// SELECT 쿼리 결과의 리턴타입은 크게 두 가지로 나뉨.
// 조회결과 데이터가 무조건 한줄만 조회 : DTO 객체.
// 조회 결과 데이터가 0줄이상 가변적일 경우 : List<DTO> 객체.

SQL select에서 묻는 값이 #{memId}와 #{memPw} 두개이다. \

값을 여러개 설정하기 위해선 DTO객체를 써야한다.

그렇기 때문에 메소드 매개변수를 MemberDTOmemberDTO 로 설정해준다.

이처럼 조회되는 값이 1줄일 경우 리턴타입을 DTO객체로 설정해준다.

그렇기 때문에 void대신 MemberDTO로 변경된다.

 

메소드를 만들어줬으면, 같은 service패키지 안에 있는 MemberServiceImpl.java 클래스로 이동하자.

 

MemberServiceImpl.java 클래스

MemberServiceImp에 빨간줄이 생길텐데,

자동완성으로 오버라이드를 만들어주면 8번째 줄과같이 메소드가 하나 만들어진다.

그 안에 sqlSession.selectOne("memberMapper.login", memberDTO); 와 같이 먼저 코딩해줄 수있다.

sqlSession은 반드시 먼저 써주고 시작하고, 뒤에 selectOne은 selectList와 차이가있다. select의 데이터가 한줄나오는데, 이때 selectOne을 써줄 수있다. select가 여러줄 나올 때가 많으면 SelectList를 써줄 수있다.이후 매개변수가 최대 두개 들어가므로, 첫번째 매개변수 값은 select 쿼리 아이디가 들어가고, 두번째 매개변수는 login의 매개변수 값을 넣는다.이렇게 조회되면, 자바 값을 MemberDTO로 전해준다. 근데 MemberDTO가 변수가 아니니, MemberDTO member로 값을 전달 받을 member 자체를 만들어 MemberDTO로 리턴해주는 member로 바꿔준다.이후 sqlSession.commit();을 해주자.

 

만들었던 login 메소드를 쓰려면 controller에서 MemverServiceImpl에 대한 클래스의 객체를 만들어야 사용할 수있다.MemberController.java 서블릿 

객체 만들 때 인터페이스 명으로 쓰자.

다시 do 실행 문으로 돌아와 MemberDTO result = memberService.login(member); 부터 코드를 완성시킨다.

set의 값을 받은 meber객체를 memberService.login(member)로 넣어주고.

실행결과를 login메소드 리턴타입 MemberDTO 이므로 실행결과를 MemberDTO 받을 수 있고,

그 결과를 result 객체를 만들어 저장시킨다.

이후 request.setAttribute("result",result); 을 이용해  저장 받은 값 result를 login_result.jsp로 보내준다.

 

login_result.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- when ~ 할때, otherwise 그렇지 않을때, -->
<!-- empty result 은 result == null 과 같다. -->
<c:choose>
    <c:when test="${empty result }">
        <script type="text/javascript">
            alert('로그인실패');
            location.href='loginForm.do';
        </script>
        
    </c:when>
    <c:otherwise>
        <script type="text/javascript">
            alert(' 로긘 성공!');
            location.href='memberList.do';
        </script>
    </c:otherwise>
</c:choose>
</body>
</html>
cs

 

이까지 하면, 프로젝트를 실행 했을 때,

MemberDTO.java 클래스를 생성 후,

index.jsp -> MemberController.java -> member-mapper.xml -> MemberService.java -> MemberServiceImpl.java -> MemberController.java -> login_result.jsp

 순으로 이동하며 실행된다.

마지막 페이지의 실행 결과는 다음 포스팅에서 이어서 하려고한다.

 

728x90
반응형

댓글