728x90
제가 만든 커뮤니티 사이트의 로그인 페이지 입니다.
기본적인 로그인 기능과 아이디/ 비밀번호 찾기 기능도 구현했습니다.
로그인 버튼으로 데이터를 전송하려면 아이디와 비밀번호 input 박스에 데이터를 필수적으로 작성해야 합니다.
아래는 로그인 기능의 jsp 코드입니다.
<script>
function clickLogin(){
document.fm.action="#이동할 컨트롤러";
document.fm.method="post";
}
</script>
<form name=fm>
<table>
<tr>
<td>아이디 :</td>
<td><input type="text" required name="ID"></td>
</tr>
<tr>
<td>비밀번호 :</td>
<td><input type="password" required name="PWD"></td>
</tr>
<tr>
<td colspan="2">
<a href="#이동할 컨트롤러">아이디찾기</a> /
<a href="#이동할 컨트롤러">비밀번호찾기</a>
</td>
</tr>
<tr>
<td colspan="2"><a href="#이동할 컨트롤러">회원가입</a></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" id="login-btn" onclick="clickLogin()"><span>로그인</span></button>
</td>
</tr>
</table>
</form>아래는 servlet 컨트롤러에서 받아오는 파라미터와 로그인 기능을 수행하는 메서드입니다.
// 컨트롤러
// 로그인 버튼이 눌렷을때 로그인 기능을 동작시킨다.
// 1. 넘어온 값을 받는다.
String id = request.getParameter("ID");
String pwd = request.getParameter("PWD");
// 2.처리 (쿼리실행)
MemberDAO md = new MemberDAO();
MemberVO mv = null;
mv = md.memberLogin(id, pwd);
PrintWriter out = response.getWriter();
// 세션에 로그인할 때 받아온 값을 저장해 다른 페이지로 이동할 때에도
// 로그인 상태를 유지하게한다.
HttpSession session = request.getSession();
if(mv != null) {
session.setAttribute("midx", mv.getMidx());
session.setAttribute("id", mv.getId());
session.setAttribute("name", mv.getName());
session.setAttribute("point", mv.getPoint());
session.setAttribute("superMember", mv.getSupermember());
session.setAttribute("password", mv.getPwd());
// 3.이동
// saveUrl이라는 로그인 페이지로 이동하기 전 url이 있을경우 그 페이지로 이동
// 없을 경우 인덱스 페이지로 이동
if(session.getAttribute("saveUrl") != null) {
response.sendRedirect((String)session.getAttribute("saveUrl"));
}else {
response.sendRedirect(request.getContextPath()+"/main/index.do");
}
}else {
out.println("<script>alert('아이디, 비밀번호가 틀렸거나 존재하지 않는 회원입니다.');location.href='"+request.getContextPath()+"/member/memberLogin.do'</script>");
}
// DB에 로그인 기능을 실행하는 메서드
public MemberVO memberLogin(String ID, String PWD) {
// id와 pwd를 파라미터로 받아온다.
String sql = "select * from member where id = ? and pwd =?";
ResultSet rs = null;
MemberVO mv = null;
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, ID);
pstmt.setString(2, PWD);
rs = pstmt.executeQuery();
if(rs.next()) {
mv = new MemberVO();
mv.setMidx(rs.getInt("midx"));
mv.setName(rs.getString("name"));
mv.setId(rs.getString("id"));
mv.setPwd(rs.getString("pwd"));
mv.setSupermember(rs.getString("supermember"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return mv;
}
아이디 찾기와 비밀번호 찾기는 같은 로직을 가지고 있다고 보면 됩니다.
아이디를 찾을 때 DB에서 이름과 이메일이 일치하는 값이 있을 경우에 ID를 받아와서 보여주면 되는데
비밀번호의 경우 일치하는 값을 추가하거나 일치했을 때 새로운 비밀번호를 설정하게 하는 등 기존의 로직에서 새로운 방법을 추가하는 것입니다.
jsp에서 form으로 이름과 이메일을 컨트롤러에 파라미터로 넘겨줍니다.
컨트롤러에서는 받은 파라미터를 다시 변수로 설정하고 만들어둔 메서드를 통해
DB와 일치하는 값이 있는지 비교하고 일치하는 값이 있을 경우 결과값을 받아옵니다.
이 값을 다시 웹페이지에 출력해주면 됩니다.
//아이디 찾기 jsp
<script>
function findIDbtn(){
document.fm.action="<%=request.getContextPath()%>이동할 컨트롤러";
document.fm.method="post";
}
</script>
<form name=fm>
<table>
<tr>
<td>이름 :</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td>이메일 :</td>
<td><input type="text" name="email" required></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" id="findID-btn" onclick="findIDbtn()"><span>아이디 찾기</span></button>
</td>
</tr>
</table>
</form>아래는 컨트롤러와 메서드 코드
sql 구문을 통해 DB에서 값을 검색하는데 여기서 table 이름과 column만 본인걸로 바꿔서 적용하면 될겁니다.
// 컨트롤러
// 아이디찾기 버튼을 클릭했을 때
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String email = request.getParameter("email");
MemberDAO md = new MemberDAO();
MemberVO mv = null;
mv = md.findID(name, email); // 아이디를 찾는 메서드
if(mv != null) {
out.println("<script>alert('"+name+"님의 아이디는 "+mv.getId()+"입니다.');"
+ "location.href='"+request.getContextPath()+"이동할 컨트롤러'</script>");
}else {
out.println("<script>alert('아이디가 존재하지 않습니다.');"
+ "location.href='"+request.getContextPath()+"이동할 컨트롤러'</script>");
}
//메서드
public MemberVO findID(String name, String email) {
//아이디 찾기 메서드
String sql = "select * from member where name = ? and email =?";
ResultSet rs = null;
MemberVO mv = null; // 회원정보를 저장하는 객체
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, name);
pstmt.setString(2, email);
rs = pstmt.executeQuery();
if(rs.next()) {
mv = new MemberVO();
mv.setMidx(rs.getInt("midx"));
mv.setId(rs.getString("id"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return mv;
}
728x90
'노트' 카테고리의 다른 글
| 토이 프로젝트 주식 커뮤니티 만들기(9) - google chart 이용 그래프 그리기 (0) | 2022.06.17 |
|---|---|
| 토이 프로젝트 주식 커뮤니티 만들기(8) - JSP 글쓰기 (0) | 2022.06.14 |
| 토이 프로젝트 주식 커뮤니티 만들기(6) - JSP 회원가입 페이지 (0) | 2022.06.05 |
| 토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼 (0) | 2022.06.03 |
| jQuery 여러 메서드 (0) | 2022.05.19 |