JAVA 풀스택 45일차 - Server (JSP MVC)

JSP MVC

1. 구조

View JSP
↓
logincontroller.jsp
↓
DAO
↓
DB
↓
logincontroller.jsp
↓
View JSP 또는 result.jsp

 

구분	파일/쿨래스	역할
View	index.jsp, adminmain.jsp, usermain.jsp, userinfo.jsp, userlistall.jsp	화면 출력
Controller	logincontroller.jsp	요청을 받아 command에 따라 기능 처리
Model	MyMemberDao, MyMemberDto, DB	DB 처리와 회원 데이터 저장

2.  command 값으로 기능 구분

logincontroller.jsp는 command 값을 보고 어떤 기능을 실행할지 결정한다

String command = request.getParameter("command");

 

command	기능
login	로그인 처리
logout	로그아웃 처리
userlist	회원 전체 조회
userinfo	내 정보 조회
updateform	내 정보 수정 화면 이동
updateuser	내 정보 수정 처리
deleteuser	회원 탈퇴 처리
updateroleform	회원 등급 변경 화면 이동
updaterole	회원 등급 변경 처리

3. 로그인 화면

3-1 index.jsp

index.jsp는 로그인 화면이다

<form action="logincontroller.jsp" method="post">
    <input type="hidden" name="command" value="login">
    <input type="text" name="id">
    <input type="text" name="pw">
    <input type="submit" value="login">
</form>

- 사용자가 입력한 아이디와 비밀번호를 logincontroller.jsp로 전송한다.

hidden input은 화면에는 보이지 않지만, Controller에게 로그인 기능을 실행하라고 알려준다

4. 로그인 처리

4-1 Controller에서 id, pw 받기

로그인 버튼을 누르면 logincontroller.jsp에서 값을 받는다

String id = request.getParameter("id");
String pw = request.getParameter("pw");

- request.getParameter()는 form에서 전달된 값을 꺼낼 때 사용

index.jsp form 입력
↓
logincontroller.jsp
↓
id, pw 받기

4-2 DAO login 실행

Controller는 받은 id, pw를 DAO로 전달한다

MyMemberDto dto = dao.login(id, pw);

- DAO의 login() 메서드는 DB에서 아이디, 비밀번호, 가입 여부를 확인

String sql =
" SELECT * FROM MYMEMBER " +
" WHERE MYID=? AND MYPW=? AND MYENABLED=? ";

- 아이디와 비밀번호가 일치하고, MYENABLED가 "Y"인 회원만 조회한다 / 탈퇴하지 않은 정상 회원만 로그인 할 수 있다

5. MyMemberDto

MyMemberDto는 회원 한 명의 정보를 저장하는 객체이다

private int myno;
private String myid;
private String mypw;
private String myname;
private String myaddr;
private String myphone;
private String myemail;
private String myenabled;
private String myrole;

- 로그인 성공 시 DB에서 조회한 회원 정보가 MyMemberDto 객체에 저장

6. 로그인 성공 처리

6-1 로그인 성공 판단

if(dto.getMyid() != null) {
    ...
}

- dto.getMyid()가 null이 아니라면 DB에서 일치하는 회원을 찾았다는 뜻

아이디 / 비밀번호 / 가입 여부 조건 일치
↓
로그인 성공

6-2 session에 로그인 정보 저장

로그인 성공 시 회원 정보를 session에 저장한다

session.setAttribute("dto", dto);

- 로그인한 회원 정보를 dto라는 이름으로 session에 저장

session에 저장하면 다른 JSP에서도 로그인한 사용자 정보를 사용할 수 있다

6-3 session 유지 시간 설정

session.setMaxInactiveInterval(60*60);

- session 유지 시간(로그인 정보 유지 시간)을 60*60(s) 동안 진행한다

7. Session

Session은 서버가 사용자별로 정보를 저장하는 공간이다

로그인 성공
↓
session에 사용자 정보 저장
↓
다른 JSP에서도 로그인 상태 확인 가능

8. 권한별 페이지 이동

로그인 성공 후 회원 등급에 따라 이동하는 페이지가 달라진다

if(dto.getMyrole().equals("ADMIN")) {
    response.sendRedirect("adminmain.jsp");
} else if(dto.getMyrole().equals("USER")) {
    response.sendRedirect("usermain.jsp");
}

등급	이동페이지
ADMIN	adminmain.jsp
USER	usermain.jsp

9. 관리자 메인 페이지

9-1 adminmain.jsp

adminmain.jsp는 관리자 로그인 후 이동하는 메인 화면이다

MyMemberDto dto = (MyMemberDto)session.getAttribute("dto");

- session에서 로그인 정보를 꺼낸

9-2 로그인하지 않은 사용자 막기

if(dto == null) {
    pageContext.forward("index.jsp");
    return;
}

- session에 dto가 없으면 로그인하지 않은 사용자이다.

session에 dto 없음
↓
로그인하지 않음
↓
index.jsp로 이동

9-3 관리자 정보 출력

<span><%=dto.getMyname() %>님 환영합니다.(등급: <%=dto.getMyrole() %>)</span>

- JSP 표현식 <%= %>을 사용해서 로그인한 관리자의 이름과 등급을 화면에 출력

10. 사용자 메인 페이지

10-1 usermain.jsp

usermain.jsp는 일반 회원이 로그인 후 이동하는 메인 화면이다

<%
	MyMemberDto dto = (MyMemberDto)session.getAttribute("dto");
	if(dto == null){
		pageContext.forward("index.jsp");
		return;
	}
%>

<span><%=dto.getMyname() %>님 환영합니다.(등급: <%=dto.getMyrole() %>)</span>

- session에 로그인 정보가 있다면 사용자 이름과 등급을 출력

11. 로그아웃 기능

11-1 로그아웃 요청

관리자 메인과 사용자 메인에는 로그아웃 버튼이 있다

<button onclick="location.href='logincontroller.jsp?command=logout'">로그아웃</button>

- 버튼 터치 시 Controller로 로그아웃 요청을 보낸

11-2 session.invalidate()

Controller에서 로그아웃 요청을 받으면 session을 삭제한다

if (command.equals("logout")){
		session.invalidate();
}

- 현재 session에 저장된 정보를 모두 삭제

11-3 로그아웃 결과 처리

request.setAttribute("msg", "로그아웃 완료");
request.setAttribute("url", "index.jsp");
pageContext.forward("result.jsp");

- 로그아웃 후 result.jsp로 이동해서 메시지를 출력하고, 확인 버튼을 누르면 다시 로그인 페이지로 이동한다

12. result.jsp

result.jsp는 공통 결과 페이지이다

로그인 실패, 로그아웃 완료, 내 정보 수정, 회원 탈퇴, 등급 변경 결과를 출력할 때 사용한다

String msg = (String)request.getAttribute("msg");
String url = (String)request.getAttribute("url");

- Controller에서 저장한 메시지와 이동 주소를 꺼낸다

<h1><%=msg %></h1>
<button onclick="location.href='<%=url%>'">확인</button>

13. 관리자 회원 전체 조회

13-1 adminmain.jsp 요청

adminmain.jsp에는 회원 전체 조회 링크가 있다

<a href="logincontroller.jsp?command=userlist">회원 정보 조회(all)</a>

- Controller로 회원 전체 조회 요청을 보낸다

13-2 Controller에서 회원 목록 조회

List<MyMemberDto> list = dao.selectAll();

request.setAttribute("list", list);
pageContext.forward("userlistall.jsp");

- Controller는 DAO를 통해 전체 회원 목록을 조회하고, 그 결과를 list라는 이름으로 request에 저장한 뒤 userlistall.jsp로 forward한다

13-3 DAO selectAll()

DAO의 selectAll()은 MYMEMBER 테이블의 전체 회원을 조회한다

String sql = " SELECT * FROM MYMEMBER ORDER BY MYNO DESC ";

14. userlistall.jsp

userlistall.jsp는 관리자용 회원 전체 조회 화면이다

MyMemberDto dto = (MyMemberDto)session.getAttribute("dto");

if(dto == null) {
    pageContext.forward("index.jsp");
    return;
}

- session에 로그인 정보가 없으면 로그인 페이지로 보낸다

List<MyMemberDto> list =
    (List<MyMemberDto>)request.getAttribute("list");

- Controller에서 넘긴 회원 목록을 꺼낸다

for(MyMemberDto m : list) {
    ...
}

- 반복문을 통해 회원 정보 출력

15. 마이페이지

15-1 내 정보 조회 요청

사용자 메인에서 내 정보 보기를 누르면 Controller로 이동한다

<a href="logincontroller.jsp?command=userinfo&myno=<%=dto.getMyno() %>">내정보 보기</a>

- Controller에게 현재 로그인한 사용자의 정보를 조회해 달라고 요청

16-2 Controller에서 selectUser 실행

int myno = Integer.parseInt(request.getParameter("myno"));
MyMemberDto dto = dao.selectUser(myno);

request.setAttribute("dto", dto);
pageContext.forward("userinfo.jsp");

- DAO의 selectUser()는 회원 번호를 기준으로 회원 한 명의 정보를 조회한다

myno 받기
↓
dao.selectUser(myno)
↓
request에 dto 저장
↓
userinfo.jsp로 forward

15-3 userinfo.jsp

userinfo.jsp는 마이페이지 화면이다

MyMemberDto info = (MyMemberDto)request.getAttribute("dto");

- Controller에서 넘긴 회원 정보를 꺼낸다

<%=info.getMyid() %>
<%=info.getMyname() %>
<%=info.getMyaddr() %>
<%=info.getMyphone() %>
<%=info.getMyemail() %>
<%=info.getMyrole() %>

- JSP 표현식으로 회원 정보를 출력

<input type="button" value="수정" onclick="updateUser(<%=info.getMyno()%>)">
<input type="button" value="탈퇴" onclick="deleteUser(<%=info.getMyno()%>)">
<input type="button" value="목록" onclick="location.href='usermain.jsp'">

- 마이페이지에 수정, 탈퇴, 목록 버튼이 있다

16. 내 정보 수정 기능

16-1 수정 화면 이동

마이페이지에서 수정 버튼을 누르면 JavaScript 함수가 실행된다

function updateUser(myno){
    let con = window.confirm("회원 정보 수정을 하시겠습니까?");
    if(con){
        location.href="logincontroller.jsp?command=updateform&myno="+myno;
    }
}

- 확인 버튼을 누르면 Controller로 이동

16-2 Controller에서 기존 정보 조회

int myno = Integer.parseInt(request.getParameter("myno"));
MyMemberDto dto = dao.selectUser(myno);

request.setAttribute("dto", dto);
pageContext.forward("updateuser.jsp");

- 기존 회원 정보를 조회해서 updateuser.jsp로 넘긴다

16-3 updateuser.jsp

updateuser.jsp는 내 정보 수정 화면이다

MyMemberDto dto = (MyMemberDto)request.getAttribute("dto");

<input type="text" name="myaddr" value="<%=dto.getMyaddr() %>">
<input type="text" name="myphone" value="<%=dto.getMyphone() %>">
<input type="text" name="myemail" value="<%=dto.getMyemail() %>">

- 주소, 전화번호, 이메일은 수정 가능하므로 input에 기존 값을 넣어준다

16-4 Controller에서 수정값 받기

수정 완료 버튼을 누르면 logincontroller.jsp로 값이 전달된다

int myno = Integer.parseInt(request.getParameter("myno"));
String myaddr = request.getParameter("myaddr");
String myphone = request.getParameter("myphone");
String myemail = request.getParameter("myemail");

MyMemberDto dto = new MyMemberDto();
dto.setMyaddr(myaddr);
dto.setMyphone(myphone);
dto.setMyemail(myemail);
dto.setMyno(myno);

- 수정에 필요한 값들을 DTO에 담는

16-5 DAO updateUser()

Controller는 DTO를 DAO로 전달한다

boolean res = dao.updateUser(dto);

DAO의 updateUser()는 회원 번호를 기준으로 주소, 전화번호, 이메일을 수정한다

String sql =
" UPDATE MYMEMBER SET MYADDR=?, MYPHONE=?, MYEMAIL=? WHERE MYNO=? ";

- 수정 성공 시 commit(), 실패 시 rollback()을 실행하고, 성공 여부를 boolean으로 반환

17. 회원 탈퇴 기능

17-1 탈퇴 요청

마이페이지에서 탈퇴 버튼을 누르면 JavaScript 함수가 실행된다

function deleteUser(myno){
    location.href="logincontroller.jsp?command=deleteuser&myno="+myno;
}

17-2 Controller에서 탈퇴 처리

회원 번호를 받아 DAO의 탈퇴 메서드를 실행한다

int myno = Integer.parseInt(request.getParameter("myno"));
boolean res = dao.deleteMemeber(myno);

17-3 DAO deleteMember()

회원 탈퇴는 실제로 DB에서 행을 삭제하는 것이 아닌 DAO에서 MYENABLED 값을 "N"으로 변경한다

String sql =
" UPDATE MYMEMBER SET MYENABLED = 'N' WHERE MYNO=? ";

MYENABLED = 'Y' → 가입
MYENABLED = 'N' → 탈퇴

17-4 탈퇴 결과 처리

탈퇴 성공 시

request.setAttribute("msg","회원 탈퇴 성공");
request.setAttribute("url","logincontroller.jsp?command=logout");

회원 탈퇴 성공
↓
logout 요청
↓
session 삭제
↓
index.jsp 이동

- 탈퇴 성공 후에는 로그아웃을 실행하도록 보낸다

탈퇴 실패 시

request.setAttribute("msg","회원 탈퇴 실패");
request.setAttribute("url","usermain.jsp");

18. 회원 등급 변경 기능

18-1 관리자 회원 목록에서 등급 변경 요청

userlistall.jsp에는 회원마다 등급 변경 버튼이 있다

<button onclick="updateRole(<%=m.getMyno()%>)">변경</button>

const updateRole = (myno)=>{
    location.href="logincontroller.jsp?command=updateroleform&myno="+myno;
}

18-2 Controller에서 회원 정보 조회

int myno = Integer.parseInt(request.getParameter("myno"));
MyMemberDto dto = dao.selectUser(myno);

request.setAttribute("selectone", dto);
pageContext.forward("updateroleform.jsp");

- 등급을 변경할 회원의 정보를 조회하고, updateroleform.jsp로 보낸다

18-3 updateroleform.jsp

updateroleform.jsp는 회원 등급 변경 화면이다

MyMemberDto tmp = (MyMemberDto)request.getAttribute("selectone");

- controller에서 넘긴 회원 정보를 꺼낸다

<select name="myrole">
    <option value="USER">일반회원</option>
    <option value="MANAGER">매니저</option>
    <option value="ADMIN">관리자</option>
</select>

- select 태그로 등급을 선택한다

18-4 Controller에서 등급 변경 처리

int myno = Integer.parseInt(request.getParameter("myno"));
String myrole = request.getParameter("myrole");

int res = dao.updateRole(myno, myrole);

- 회원 번호와 변경할 등급을 받아 DAO로 전달한다

18-5 DAO updateRole()

DAO의 updateRole()은 회원 번호를 기준으로 회원 등급을 수정한다

String sql = " UPDATE MYMEMBER SET MYROLE=? WHERE MYNO=? ";