본문 바로가기

JSP&JSTL 수업 정리

JSP/JSTL 5일차.

board에 이어서 로그인 기능 구현

 

로그인 테이블 생성

create table member(
id varchar(100),
pwd varchar(100) not null,
email varchar(200) not null,
phone varchar(50),
regdate datetime default now(),
lastlogin datetime default now(),
primary key(id));

 

( isCheck, modPwdDate, addr 등 필요한걸 더 추가가능 )

만약 주소를 여러개 받고 싶다면 주소테이블을 별도로 분리  

 

화면구성 

회원가입 화면

로그인화면 => 메인에서 받는 케이스, 로그인 성공시 로그인버튼은 로그아웃버튼으로 바뀜.

글쓰기 페이지로 이동이 로그인해야 나오게설정, 글작성자, 댓글작성자 둘 다 로그인 한 아이디로 고정

회원정보수정화면 

회원리스트 => admin 일 경우


● MemberVO를 생성해서 데이터베이스의 member 테이블의 구조와 같게 구성 

● 컨트롤러부터 DAO까지 쭉 생성해서 연결.

- 동기 방식이므로 컨트롤러에 requestDispatcher과 목적지주소 선언필요.

● mapper 생성하고 ( namespace = "MemberMapper") mybatis에 mapper 추가설정

● 회원가입을 누르면 넘어가는 회원가입페이지를 join.jsp 로만들고  메인에서 join으로 a 태그 => 컨트롤러에서 case join으로오면 조인 페이지로 넘어오게 설정 이후에 조인에서 register case를 구현해서 회원가입 구현

String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
MemberVO mvo = new MemberVO(id, pwd, email, phone);

log.info(">>>> mvo register 객체 >>>> {}", mvo);
int isOk = msv.register(mvo);
log.info(">>>> mvo register >>>>" + (isOk > 0 ? "성공" : "실패"));
destPage = "/index.jsp";
register를 serivce 부터 mapper 까지 구현 3일차, 4일차에 많이해봤으니 따로 기재하지는않음 기억안나거나 모르겠으면 저번거 참고.
● 회원가입 join 페이지

 

	<h1>회원가입 Page</h1>
	
	<form action="/mem/register" method="post" enctype="multipart/form-data">
	id:<br>
	<input type="text" name="id" placeholder="id..."><br>
	pwd:<br>
	<input type="password" name="pwd" placeholder="pwd..."><br>
	email:<br>
	<input type="text" name="email" placeholder="email..."><br>
	phone:<br>
	<input type="text" name="phone" placeholder="phone...">
	file: <br>
	<input type="file" name="imageFile" accept="image/jpeg, image/gif, image/png"><br>
	<button type="submit">join</button>
	</form>

 

  로그인을 구현하기위해서 정보를 가져와서 session 객체에 저장해야함. 

session : 모든 jsp에 공유되는 객체 / 브라우저가 종료되면 삭제

String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
MemberVO mvo = new MemberVO(id, pwd);
MemberVO loginMvo = msv.login(mvo);

 

아이디와 비밀번호를 받아서 DB안의  해당 아이디와 비밀번호가 있는지 확인.

if(loginMvo != null) {

HttpSession ses = request.getSession();
ses.setAttribute("ses", loginMvo);
// 로그인 유지시간 초단위로 설정 10분
ses.setMaxInactiveInterval(10*60);
} else {

// 로그인이 실패했다면... index.jsp로 메시지전송

request.setAttribute("msg_login", -1);
}

destPage = "/index.jsp";

 

로그인이 성공했다면 세션에 저장하도록하고 실패하면 메세지를 하나 만들어서 전송

 

로그아웃 기능은 getSession으로 세션을받아와서 멤버객체인 mvo에 다시 넣어주고 mvo에.id를 넣어 마지막 로그인 기록을 갱신해주고 세션 무효화로 끊어내면 끝.

try {
				// session에 값이 있다면 해당 세션을 끊어라.
				HttpSession ses = request.getSession();
				MemberVO mvo = (MemberVO) ses.getAttribute("ses");
				log.info(">>> ses 에서 추출한 mvo 객체  > {}" , mvo );
				
				// lastlogin update
				isOk = msv.lastLogin(mvo.getId());
				log.info(">>> lastLogin update >> {}" , (isOk>0 ? "성공" : "실패"));
				ses.invalidate(); // 세션 무효화 (세션끊기)
				destPage= "/index.jsp";
				
			
			} catch (Exception e) {
				log.info("logout error");
				e.printStackTrace();
			}

 

● 수정, 삭제 , 유저리스트, 내가 쓴 글 확인 기능을 만들기 위해서 화면 추가로 구성 유저리스트, 내가쓴글을 보는 페이지와 수정페이지를 따로 jsp파일로 만들어야함 나는 list, modify, mybrd 로 만듬.
main 에는
<c:if test="${ses.id eq null }">​

 

if 문을 써서 회원가입은 로그인이 되기전에만 나오도록 만들어주고

 
<c:if test="${ses.id ne null }">

  ${ses.id }님이 login 하셨습니다. <br>

  계정생성일 : ${ses.regdate } / 마지막접속일 : ${ses.lastlogin }

  <a href="/mem/modify"><button type="button">회원정보수정</button></a>

<c:if test="${ses.id eq 'admin' }">
  <a href="/mem/list"><button type="button">회원리스트</button></a>
</c:if>
<a href="/mem/myboard"><button>내가 쓴글 보기</button></a>
<a href="/mem/logout"><button type="button">logout</button></a>
</c:if>

 

세션정보가 null이 아닌 로그인이 성공한 경우에 나오는 정보들을 보여주게 만듬.

리스트 글보기 수정은 각 필요한 링크로 연결.

 

  modify 케이스 일 때  정보를 modify.jsp 받을 수 있도록 세션을 받아와서 mvo 객체로만들고 mvo 객체를 req.set 해준다.

이러면 modify.jsp에서 mvo객체의 정보를 받아올 수 있다.

case "modify":
		try {
			HttpSession ses = request.getSession();
			MemberVO mvo = (MemberVO) ses.getAttribute("ses");
			log.info(">>> modify ses 에서 추출한 mvo 객체  > {}" , mvo );			
			request.setAttribute("mvo", mvo);		
			destPage = "/member/modify.jsp";					
			} catch (Exception e) {
				log.info("modify error");
				e.printStackTrace();
			}

 

●  /mem/info로 form 안의 수정한 데이터를 받을 수 있게하고  삭제버튼에다가는 /mem/delete를 추가

<a href="/index.jsp"><button>main</button></a>

<form action="/mem/info" method="post" ">

id:<br> <input type="text" name="id" placeholder="id..." value = ${mvo.id } readonly="readonly"><br>

pwd:<br> <input type="password" name="pwd" placeholder="pwd..." value = ${mvo.pwd }><br>

email:<br> <input type="text" name="email" placeholder="email..." value = ${mvo.email }><br>

phone:<br> <input type="text" name="phone" placeholder="phone..." value = ${mvo.phone }><br>

<button type="submit">modify</button>
<a href="/mem/delete?id=${mvo.id }"><button type="button">delete</button></a>

</form>

 

● form안에서 전송한 데이터를 받아와서 멤버 객체를 만들어주고 

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

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

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

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

MemberVO mvo = new MemberVO(id, pwd, email, phone);

 

서비스에 modify 만들어서 객체를 준다음 mapper까지 연결해서 구현 성공한다면 세션을 가져와서 set 해주고 만약 modfiy 가 실패한다면 -1 메세지가 날라가도록 만듬.

int isOk = msv.modify(mvo);
log.info(" >>> userInfo Modify "+ (isOk > 0 ? "성공" : "실패"));
if(isOk > 0 ) {
HttpSession ses = request.getSession();
ses.setAttribute("ses", mvo);
} else {
request.setAttribute("msg_modify", -1);
}
destPage = "/index.jsp";

 

● 삭제는 그냥 id를 가져와서 delete 해주면됨. 많이했던것. 모르겠으면 저번 게시글참고 대신 여기서는 세션을 가져와서 무효화시켜줄 필요가있음.

case "delete":
			try {
				String id = request.getParameter("id");
				int isOk = msv.delete(id);
				
				log.info(">>>> userInfo delete >>> " + (isOk > 0 ? "성공" : "실패"));
				
				HttpSession ses = request.getSession();
				MemberVO mvo = (MemberVO) ses.getAttribute("ses");
				ses.invalidate();
				
				destPage = "/index.jsp";		
				
			} catch (Exception e) {
				log.info(" userDelete error");
				e.printStackTrace();
			}

 

mybrd는 화면을 구성해주고

<table>
		<thead>
		<tr>
		<th>no.</th>
		<th>title</th>
		<th>writer</th>
		<th>regdate</th>
		<th>readCount</th>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${boardList}" var="bvo">
			<tr>
			<td>${bvo.bno }</td>
			<td><a href="/brd/detail?bno=${bvo.bno }">
			${bvo.title }</a></td>
			<td>${bvo.writer }</td>
			<td>${bvo.regdate }</td> 
			<td>${bvo.readCount }</td>
			</tr>
		</c:forEach>
		
		</tbody>
	
	</table>

 

 board 테이블의 writer가 member의 id 와 일치하니까 세션을 가져와 mvo 객체를 구성하고 id 를 mvo.getId로 가져와서

BoardVO의 리스트를 만들어서 wirter 가 id와 일치하는 것들을 찾아서 list에 넣고 foreach로 출력 할 수 있도록 구현

case "myboard":
			try {
				HttpSession ses = request.getSession();
				MemberVO mvo = (MemberVO) ses.getAttribute("ses");				
				String id = mvo.getId();
				
				log.info(">>> id >>>>>> {} ", id);
				
				List<BoardVO> list = msv.getBoard(id);
				
				log.info(">>>> BoardList >>>> {}", list);
				
				request.setAttribute("boardList", list);
				
				destPage = "/member/mybrd.jsp";
				
			} catch (Exception e) {
				log.info(" myBoard error");
				e.printStackTrace();
			}		
			break;
		}
 <select id="board" resultType="domain.BoardVO">
 	select * from board where writer = #{id}
 </select>

 

이런식으로 구현하면 내가 쓴 게시글을 눌렀을 때 나의 id와 게시글의 wirter가 일치하는 애들만 찾아서 화면에 출력할 수 있음.

 

이후 여기서 회원가입, 로그인 , 유저리스트 ,수정에 전 게시글에서 했던 이미지파일을 첨부해보는 작업을 연습으로 해보았는데 저번 글에 있는 내용들이니 생략.

'JSP&JSTL 수업 정리' 카테고리의 다른 글

JSP/JSTL 4일차.  (0) 2024.10.24
JSP/JSTL 3일차.  (0) 2024.10.23
JSP/JSTL 2일차.  (0) 2024.10.22
JSP/JSTL 1일차.  (0) 2024.10.21