21.01.15. JSP & Servlet - 로그인시스템, 배너, 섹션, 회원정보수정

저번시간 숙제 풀이. login시스템을 만들어줍시다.

	public MemberDTO login(MemberDTO dto) {
		MemberDTO info = null;
		
		getConnection();
		
		String sql = "select email, tel, address from web_member where email=? and pw=?";
//		select * from ~으로 해도 되지만 가져올 것이 명확하므로 직접 적어주어도 좋다.
		
		try {
			psmt = conn.prepareStatement(sql);
//			sql문장이 틀릴 것을 대비한 예외처리. db와 관련된 모든 예외처리는 SQLException.
			psmt.setString(1, dto.getEmail());
			psmt.setString(2, dto.getPw());
			rs = psmt.executeQuery();
			
			if (rs.next()) {
				String email = rs.getString(1);
				String tel = rs.getString(2);
				String address = rs.getString(3);
//				로그인 성공시 우리는 info에 객체를 넣어주기로 했다.
				info = new MemberDTO(email, tel, address);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			close();
		}
		
		return info;
	}

rs.next() 해석 ↓

 

로그인 실패시 - 컬럼만 위치.

email

tel

address

로그인 성공시 

email	tel	address
mdr	1234	광주

 

resultset은 특이한 개념이 하나 있다. 위치를 가리키는 '커서'라는 개념.

무조건 맨 처음 커서의 위치는 컬럼을 가리키고 있다. 이 커서는 값이 있으면 다음 행으로 커서를 한 칸씩 내린다.

만약 값이 없다면 커서를 아래로 내릴 수 없으므로 null을 돌려주게 된다.

 

내가 회원가입한 값이 기억 안나요ㅜㅜ

select * from web_member

sql문 코드파일에 위의 코드를 입력해서 실행하면 테이블에 회원가입한 정보가 나타날 것이다.

 

잘 만들어졌는지 실행.

로그인이 잘 되는 것을 볼 수 있다.

콘솔창에 출력이 잘된다는 것은 로그인시스템이 정상적으로 실행되고 있다는 것을 의미하므로 웹페이지에서 로그인했을 때 넘어갈 화면을 구현해주도록 하자.

LoginService.java로 돌아와서 로그인 성공시의 코드를 작성하시오.

if (info != null) {
	System.out.println("로그인 성공");
	// Session에 info라는 이름으로 info객체를 저장하시오.
	HttpSession session = request.getSession();
	session.setAttribute("info", info); // "info"에서 값을 가져와서 info로 값을 보내준다.
} else { //info가 null값이라면
	System.out.println("로그인 실패");
}
//	로그인을 성공했든 실패했든 메인으로 돌아오도록
response.sendRedirect("main.jsp");

 

로그인을 성공하면 이제 메인으로 돌아오게 될 것이므로 main.jsp도 수정해줘야겠죠?

해당라인으로 와서 코드 작성합니다. (17번째 줄이자 body의 시작부)

<%
	// session에 있는 info객체를 불러들여서 변수 info에 저장하시오.
	MemberDTO info = (MemberDTO) session.getAttribute("info");
%>

로그인을 성공했든 안했든 세션에서 info라는 이름에 값을 받아온 것을 main.jsp에서 MemberDTO info에 값을 불러와서 담아준다. 현재 info는 object 타입이니 값을 담아줄 MemberDTO타입으로 형변환까지 해주도록 한다.

 

로그인 성공시 보여줄 배너라인으로 이동.

 

로그인을 성공했다면 이메일값과 함께 환영인사를 출력하는 코드 작성.

<% if (info != null){%>
	<h1><%= info.getEmail() %>님 환영합니다.</h1>
<% } else { %> <!-- null이라면 -->
	<h1>로그인을 해주세요.</h1>
<% } %>

결과 :

성공적으로 로그인 성공메시지 출력.

이번엔 하단에 해당하는 부분 작성해보도록 합시다.

라인으로는 175번째 줄에 해당.

<section class="split">
	<section>
		<div class="contact-method">
			<span class="icon alt fa-envelope"></span>
			<h3>Email</h3>
			<a href="#">로그인 한 사람의 이메일을 출력</a>
			<!-- 로그인 한 사용자의 이메일을 출력하시오 -->
		</div>
	</section>
	<section>
		<div class="contact-method">
			<span class="icon alt fa-phone"></span>
			<h3>Phone</h3>
			<span>로그인 한 사람의 전화번호를 출력</span>
			<!-- 로그인 한 사용자의 전화번호를 출력하시오 -->
		</div>
	</section>
	<section>
		<div class="contact-method">
			<span class="icon alt fa-home"></span>
			<h3>Address</h3>
			<span>로그인 한 사람의 집주소를 출력</span>
			<!-- 로그인 한 사용자의 집주소를 출력하시오 -->
		</div>
	</section>
</section>

위의 코드를 해당 부분에 맞게 코드를 입력하여 수정해봅시다.

 

우리는 이미 info에게 값을 받아온 상태. 아까 이메일을 받아서 "'이메일'님 환영합니다."를 출력했으니 이것과 동일하게 코드를 입력한다면 이것도 쉽게 가능하다.

<section class="split">
	<section>
		<div class="contact-method">
			<span class="icon alt fa-envelope"></span>
			<h3>Email</h3>
            	<% if(info == null) { %>
					<a href="#">로그인을 먼저 해주세요.</a>
				<% } else { %>
					<a href="#"><%= info.getEmail() %></a>
				<% } %>
		</div>
	</section>
	<section>
		<div class="contact-method">
			<span class="icon alt fa-phone"></span>
			<h3>Phone</h3>
				<% if(info == null) { %>
					<span>로그인을 먼저 해주세요.</span>
				<% } else { %>
					<span><%= info.getTel() %></span>
				<% } %>
		</div>
	</section>
	<section>
		<div class="contact-method">
			<span class="icon alt fa-home"></span>
			<h3>Address</h3>
				<% if(info == null) { %>
					<span>로그인을 먼저 해주세요.</span>
				<% } else { %>
					<span><%= info.getAddress() %></span>
				<% } %>
		</div>
	</section>
</section>

결과 :

상단 오른쪽에 떠있는 로그인 혹은 로그인을 안했을시 나타나는 라인 수정.

<!-- Header -->
	<header id="header" class="alt">
		<a href="index.html" class="logo"><strong>Forty</strong> <span>by HTML5 UP</span></a>
		<nav>
			<% if (info == null) { %>
				<a href="#menu">로그인</a>
			<% } else { %>
				<a href="LogoutService">로그아웃</a>
				<a>회원정보수정</a>
			<% } %>
		</nav>
	</header>

결과 :

 

로그아웃 버튼을 누르면 해당 섹션으로 이동하게끔 LogoutService.jsp를 만들어주자.

package com.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/LogoutService")
public class LogoutService extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// session 안에 있는 info라는 이름을 삭제하시오.
		// 그리고 main.jsp로 이동하시오.
		HttpSession session = request.getSession();
//		기존에 있는 세션을 request로부터 받아와서 HttpSession session에 저장.
		session.removeAttribute("info");
//		remove액션을 취해주고
		response.sendRedirect("main.jsp");
//		지워졌다면 메인으로 다시 돌려보내야지
	}

}

결과 :

로그아웃. 성공적.

회원정보도 수정해야하지 않겠어? update.jsp로 이동하게 하이퍼링크 걸어주고 해당 파일로 이동.

<body style="text-align: center;">
	<% MemberDTO info = (MemberDTO) session.getAttribute("info"); %>
	<!-- Wrapper -->
		<div id="wrapper">
			<!-- Menu -->
				<nav id="Update">	
					<ul class="actions vertical">
						<li><h5>회원정보수정</h5></li>
							<form action="UpdateService" method="post">
								<li>접속한 Email : <%= info.getEmail() %></li>
								<li><input name="pw" type="password" placeholder="PW를 입력하세요" style="width: 500px; margin: 0 auto;"></li>
								<li><input name="tel" type="text" placeholder="전화번호를 입력하세요" style="width: 500px; margin: 0 auto;"></li>
								<li><input name="address" type="text" placeholder="집주소를 입력하세요" style="width: 500px; margin: 0 auto;"></li>
								<li><input type="submit" value="JoinUs" class="button fit" style="width: 500px; margin: 0 auto;"></li>
							</form>
					</ul>
				</nav>			
		</div>

결과 :

이제 코드 내용대로 화면에 입력한 수정할 회원정보를 입력하면 그것을 수행해줄 UpdateService.java를 생성해줍시다.

package com.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.model.MemberDTO;

@WebServlet("/UpdateService")
public class UpdateService extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// 로그인한 email과 client가 수정하고 싶은 pw, tel, address를 콘솔창에 출력하시오.
		
		// 포스트 방식의 한글이 깨지지 않는 인코딩은 request.
		request.setCharacterEncoding("EUC-KR");
		HttpSession session = request.getSession();
		MemberDTO info = (MemberDTO) session.getAttribute("info"); // login 정보 담기.
		String email = info.getEmail(); // login 정보에서 email가져오기.
		
		// 수정하려고 사용자가 입력한 정보는 request에 있으니 옮겨닮아주자.
		String pw = request.getParameter("pw");
		String tel = request.getParameter("tel");
		String address = request.getParameter("address");
		
		System.out.println(email+"/"+pw+"/"+tel+"/"+address);
	}

}

콘솔창에 출력되는지 확인해서 코드에 문제 없는지 확인.

잘 출력되는 것을 확인했다면 이제 db에 저장된 정보도 수정되게 만들어주자.

콘솔창에 출력해주던 System.out.println을 지우고 아래의 코드를 입력.

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

MemberDTO dto = new MemberDTO(email, pw, tel, address); // dto를 통해 회원정보를 하나로 묶어주기
MemberDAO dao = new MemberDAO(); // dao를 통해 회원정보 수정요청
int cnt = dao.update(dto); // 하나로 묶인 회원정보를 매개변수로 받는 dao.update.
// 결과는 int로 돌려받는다.

if (cnt > 0) {
	System.out.println("회원정보수정 성공");
} else {
	System.out.println("회원정보수정 실패");
}

이제 회원정보가 수정됐을시 int값으로 돌려주는 dao.update를 구성해보세요. 이것이 숙제~!

오늘도 고생하셨습니다.^^~