이번에는 servlet으로 회원가입 및 로그인 페이지를 만드는 법을 알아보겠다!
크게 보면 회원가입은 새롭게 데이터를 입력하는 것이니 insert를 활용하고
로그인은 기존의 데이터를 찾아야 하니 select를 활용해주면 된다.
서블릿 파일을 위주로 해서, 다른 파일들은 기존의 글을 참고해서 설명하겠다.
테이블 생성
member라는 테이블명과 함께
변수 5개 userId,userPwd,userName,userBirth,userTel를 입력해주며
모두 varchar2로 타입을 설정했고 userBirth만 date 타입으로 컬럼을 생성했다.
MemberDAO.java
위의 변수를 입력해주고 getter,setter를 생성해주면 된다.
테이블 생성 시에는 대소문자 구분 안하고 입력해도 되지만
여기서 입력하는 변수명은 구분을 해줘야 한다.
MemberDTO.java
db에 데이터를 연결하고, 입력,수정 등의 메소드를 만들 곳이다.
먼저 db를 연결해준 다음
회원가입 실행을 위해 insertData라는 메소드명으로 insert를 입력해 만든다.
두번째로는 로그인 시 데이터를 읽어올 수 있도록 getReadData 메소드를 만들 것이다.
이 내용들은 기존에 블로그와 같은 내용이기 때문에 링크를 참조하길 바란다.
getReadData 메소드는 sql에서 update를 사용하며 데이터 1개를 가져오기 때문에 while대신 if문으로 바꿔주면 된다.
https://realzzu.tistory.com/47
web.xml
서블릿의 가상주소와 실제주소를 설정하기 위해 입력한다.
가상주소는 join 폴더이고 실제주소는 member 폴더에 만들 것이다.
웹페이지 링크에 join이 있으면 서블릿을 실행하도록 한다.
MemberServlet.java <서블릿>
먼저 HttpServlet를 상속해주고
doGet메소드와 doPost메소드 오버라이딩 하며
foward 메소드를 만들어준다.
이 역시 기존의 블로그와 같은 내용, 설명이기 때문에 링크를 첨부하였다.
doPost메소드에서 created_ok.do 부분까지 변수만 다르고 같은 코딩이다!
created.do는 회원가입 창을 보여주어 데이터를 5개의 값들을 입력받고
insertData메소드에 넣어주면 된다.
또한 insert를 했으니 sendRedirect 역시 실행해야 한다.
https://realzzu.tistory.com/48
if문에서 created.do가 있으면 created.jsp(실제 주소)로 연결되게 했으며
위의 화면은 created.jsp에서 테이블을 만들어 디자인하였으며
하단의 3개 버튼에 각각 다른 기능을 주었다.
'가입하기'를 누를 경우(onclick) 함수가 실행되게 했으며
함수의 내용에 하단의 코딩을 입력하여
f.action = "<%=cp%>/join/created_ok.do";
f.submit();
created_ok.do로 넘어가게 하였다.
'가입취소'의 cp는 취소를 누를 시 보여질 페이지를 설정해주면 된다.
Session
로그인은 session을 사용할 것이다!
}else if(uri.indexOf("login.do")!=-1) {
url = "/member/login.jsp";
forward(req, resp, url);
}else if(uri.indexOf("login_ok.do")!=-1) {
String userId = req.getParameter("userId");
String userPwd = req.getParameter("userPwd");
MemberDTO dto = dao.getReadData(userId);
if(dto==null || (!dto.getUserPwd().equals(userPwd))) {
req.setAttribute("message", "아이디 또는 패스워드를 정확히 입력하세요.");
url = "/member/login.jsp";
forward(req, resp, url);
return;
}
HttpSession session = req.getSession();
CustomInfo info = new CustomInfo();
info.setUserId(dto.getUserId());
info.setUserName(dto.getUserName());
session.setAttribute("customInfo", info);
url = cp;
resp.sendRedirect(url);
}else if(uri.indexOf("logout.do")!=-1) {
HttpSession session = req.getSession();
session.removeAttribute("customInfo");
session.invalidate();
url = cp;
resp.sendRedirect(url);
}
login.do / login_ok.do / logout.do 총 3개로 나눠서 코딩을 설명하겠다!
- 로그인 (login.do)
로그인은 단순히 입력페이지로 연결시키면 된다.
forward는 실제 주소를 받으므로 url에 실제 주소를 입력해서 페이지를 넘겨준다
- 로그인 실행 (login_ok.do)
넘어오는 아이디와 비밀번호를 getParameter로 받아준다.
받은 아이디를 기준으로 dao의 getReadData로 데이터를 읽어온 다음,
if문을 통해 데이터가 없거나 혹은 비밀번호가 일치하지 않은 경우를 주어, 다시 입력하도록 한다.
HttpSession 부분은 세션을 만드는 방법이다!
jsp는 세션을 가지고 있지만 클래스는 추가로 생성해줘야 한다.
CustomInfo라는 클래스 파일을 만들어 session에 올릴 변수와 getter,setter를 해주고, 여기서 객체 생성을 해서 가져올 수 있도록 한다.
info로 아이디와 비밀번호 값을 넣어준 다음, 그 데이터들을 ""안에 넣어서 세션에 올린다.
마지막에는 세션을 변경해줬으니 리다이렉트 해준다.
- 로그아웃 (logout.do)
로그아웃은 세션을 호출한 다음
removeAttribute로 변수를 지운 다음, invalidate로 그 안의 데이터까지 지우면 된다!
로그인을 하기 전후로 페이지에서 볼 수 있는 글들을 제한시킬 것이다.
index.jsp에서 jstl을 활용하여 조건에 따라 보이도록 한다.
empty는 내용이 없다는 것이다. 즉, userId가 없으면 해당 문자를 출력해주고
내용이 있다면 EL을 통해 userName값을 출력하여 문자열을 보여준다.
또한 그동안 이전 글에서 보았던 성적처리, 게시판, 방명록 페이지 목록을 띄우고
empty 여부에 따라 링크를 누를 수 있도록 한다.
이렇게 해서 서블릿과 세션을 통해
회원가입부터 로그인창까지 웹페이지를 구현하는 코딩을 알아보았다!
2월 22일 수업 🌗
'개발 교육 TIL > front-end' 카테고리의 다른 글
[JSP/Servlet] 파일 다운로드 방법 및 예제 (0) | 2022.02.24 |
---|---|
[Servlet] 쿠키(Cookie) 생성 예제 & 파일 업로드 (0) | 2022.02.23 |
[Servlet] 게시판 만들기 (0) | 2022.02.22 |
[Servlet] 상속, doGet/Post 방식, setAttribute, EL, JSTL (0) | 2022.02.21 |
[JSP] 방명록 만들기 (0) | 2022.02.21 |