include 지시자 및 액션 태그를 활용한 index.jsp

복습

※ 웹뷰(JSP)가 컨트롤러(Servlet)에 요청 보내는 법 

* 동기 요청 (페이지 이동)

- <a href = "컨트롤러></a>
- location.href="컨트롤러";
- <form action="컨트롤러" method=""></form>    --- 사용자가 데이터를 입력해야 하는 상황 

* 비동기 요청 (페이지 이동 없음) -- AJAX

- const xhttp = new XMLHttpRequest(); 
  xhttp.open("post","컨트롤러");
  xhttp.send();

---

※ 에러 확인하는 법 

자바 에러 -- 콘솔 확인

자바스크립트 에러 -- 개발자도구

콘솔과 개발자 도구에 안뜬다? -- 로직 오류. 다 뜯어봐야 함! 

---

 

 

페이지 포함하는 지시자

(1) include 지시자 -- 페이지 포함. 포함할 페이지가 고정으로 지정.

<%@ include file="b.jsp"%>

 

(2) include 액션 태그 -- 포함할 페이지가 매번 바뀔 수 있음.

<jsp:include page="${view}"/>

 

<table border="1">
	<tr>
		<td colspan="2" style="height: 150px">
			<h3><%@ include file="/menu/header.jsp"%></h3></td>
	</tr>
	<tr style="height: 400px">
		<td style="width: 150px"><%@ include file="/menu/menu.jsp"%></td>
		<td style="width: 400px">
			${msg}
			<c:if test="${not empty view }">
				<jsp:include page="${view }" />
			</c:if></td>
	</tr>
</table>
<%@ include file="/menu/tail.jsp"%>

 

<%@ include file="/menu/header.jsp"%>
<%@ include file="/menu/menu.jsp"%>
<%@ include file="/menu/tail.jsp"%>

- Header와 Menu, Tail은 고정 jsp 페이지로 지정한다.

---- Header - login 여부에 따라 다르게 보여줌. --- header.jsp에서 c:if 문으로 조건 지정해줌.

---- Menu - login 여부에 따라 다르게 보여줌. --- menu.jsp에서 c:if 문으로 조건 지정해줌.

 

<c:if test="${not empty view }">
	<jsp:include page="${view }" />
</c:if>

- view 는 include 액션 태그를 써서 Header와 Menu에서 선택하는 것에 따라 다르게 페이지를 띄워준다.

 

 

 

header.jsp

- session에 loginId가 저장되어있지 않으면 (로그인하기 전엔) 로그인과 회원가입을 화면에 띄움

- session에 loginId가 저장되어 있으면 (로그인 했으면) hello 메시지를 띄워줌

<h3>My Diary</h3>
<c:if test="${empty sessionScope.loginId }">
	<a href="${pageContext.request.contextPath}/member/login">LogIn</a>
	<a href="${pageContext.request.contextPath}/member/join">Sign-up</a>
</c:if>
<c:if test="${not empty sessionScope.loginId }">
	<a style="text-align: center">~ Hello ${sessionScope.loginId } ~</a>
</c:if>

 

menu.jsp

- session에 loginId가 저장되어 있으면 (로그인 했으면) 내정보, 로그아웃, 탈퇴, 일기목록, 일기작성 링크를 띄워줌

<h3>MENU</h3>
<c:if test="${not empty sessionScope.loginId }">
	<a href="${pageContext.request.contextPath}/member/myinfo?id=${sessionScope.loginId}">My Info</a><br/>
	<a href="${pageContext.request.contextPath}/member/logout">LogOut</a><br/>
	<a href="${pageContext.request.contextPath}/member/out?id=${sessionScope.loginId}">Withdrawal</a><br/>
	<a href="${pageContext.request.contextPath}/diary/list">List</a><br/>
	<a href="${pageContext.request.contextPath}/diary/add">Write</a>
</c:if>

 

tail.jsp

<h4>HAPPY SUNNY DAY</h4>
copyrighted by HAM not that ham<br/>

 

 

---

 

1. 로그인

 

@WebServlet("/member/login")
public class Login extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public Login() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 내용부분에 띄울 뷰 페이지 경로를 view변수(request)에 담음 
		request.setAttribute("view", "/member/login.jsp"); 
		RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
		dis.forward(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd");
		
		MemberService service = new MemberService();
		MemberVo vo = service.getMember(id);
		
		String msg = "로그인 실패";
		if(vo != null && pwd.equals(vo.getPwd())) {  // id로 검색된 게 있고 pwd도 일치함 
			HttpSession session = request.getSession(); // session 획득 
			session.setAttribute("loginId", id); //계속 기억할 필요가 있는 것 -- session 
			msg = "로그인 성공";
		}
		request.setAttribute("msg", msg);
		RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
		dis.forward(request, response);
	}
}

 

 

<!-- index.jsp -->
<a href="${pageContext.request.contextPath}/member/login">LogIn</a>

1. index.jsp에서 로그인 링크를 누르면 Login.java 에서 doGet() 호출됨.

 

 

<!-- index.jsp -->
<jsp:include page="${view }" />

//login.java -- doGet()
request.setAttribute("view", "/member/login.jsp"); 
RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
dis.forward(request, response);

2. index.jsp의 내용(${view})에 띄울 login.jsp 페이지 경로를 request에 담는다.

  --> index.jsp로 이 request를 forward 방식으로 전달한다. (데이터를 가지고 서버 내 이동)

 

 

<!-- login.jsp -->
<form action="${pageContext.request.contextPath }/member/login" method = "post">

3. login.jsp 에서 폼에 값을 입력하고 submit 하면 Login.java 에서 doPost() 호출됨.

 

 

// Login.java -- doPost()
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
		
MemberService service = new MemberService();
MemberVo vo = service.getMember(id);
		
String msg = "로그인 실패";
if(vo != null && pwd.equals(vo.getPwd())) {  // id로 검색된 게 있고 pwd도 일치함 
	HttpSession session = request.getSession(); // session 획득 
	session.setAttribute("loginId", id); //계속 기억할 필요가 있는 것 -- session 
	msg = "로그인 성공";
}
request.setAttribute("msg", msg);
RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
dis.forward(request, response);

4. 폼파라메터값을 읽어와 insert 메소드 실행.

--> id 와 pwd가 일치하면 session을 획득해 id를 "loginId"라는 이름으로 session에 담고 '로그인성공'으로 String 변경.

----> String msg를 request에 담아 index.jsp로 forward 방식으로 이동함. (데이터를 가지고 이동하기 때문에)

 

 

<!-- index.jsp -->
${msg}

<c:if test="${not empty sessionScope.loginId }">
</c:if>

5. 인덱스의 ${msg}에 가져온 request 값을 뿌려줌. 

--> header.jsp 와 menu.jsp의 if 문에 충족한 뷰를 보여줌. 

 

 

 

2. 내정보확인 & 수정

package member.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 member.MemberService;
import member.MemberVo;

/**
 * Servlet implementation class MyInfo
 */
@WebServlet("/member/myinfo") // id로 검색하는 Servlet 
public class MyInfo extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MyInfo() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    
    // 3. ID 검색 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String id = request.getParameter("id"); //id값 읽어오기 
		
		MemberService service = new MemberService();
		MemberVo m = service.getMember(id); //id로 검색 
		
		//검색한 결과를 request에 담는다. setAttribute(뷰페이지에서 부를 이름, 값--제약없음): 속성 설정 메소드;
		//여러 페이지를 담고 싶으면 session 
		request.setAttribute("m", m);
		request.setAttribute("view", "/member/myinfo.jsp"); 
		RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
		dis.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		
		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd");
		String name = request.getParameter("name");
		
		MemberService service = new MemberService();
		service.editMyInfo(new MemberVo(id, pwd, name, ""));
		
		response.sendRedirect(request.getContextPath() + "/index.jsp"); //내 정보 보여주기
	}

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>${m.id }님의 정보</h3>
<form action="${pageContext.request.contextPath }/member/myinfo" method="post">
id:<input type="text" value="${m.id }" name="id" readonly><br/>
pwd:<input type="text" value="${m.pwd }" name="pwd"><br/>
name:<input type="text" value="${m.name }" name="name"><br/>
email:<input type="text" value="${m.email }" name="email" readonly><br/>
<input type ="submit" value="수정">
<a href ="${pageContext.request.contextPath }/index.jsp">메인페이지로</a>
</form>
</body>
</html>

 

 

3. 로그아웃

package member.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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;

/**
 * Servlet implementation class Logout
 */
@WebServlet("/member/logout")
public class Logout extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Logout() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// request.getSession(false) -- 세션 없으면 에러
		// request.getSession(true) -- 없으면 만들어서 줌. 
		HttpSession session = request.getSession(false); //쓰던 세션 가져와라. 새 세션 말고.
		session.invalidate(); // 세션 무효화 -> 자동으로 새 세션 만들어짐 
		RequestDispatcher dis = request.getRequestDispatcher("/index.jsp");
		dis.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

 

4. 탈퇴 

package member.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
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 member.MemberService;

/**
 * Servlet implementation class Delmyinfo
 */
@WebServlet("/member/out")
public class MemberOut extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MemberOut() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// 폼 파라메터 값을 불러와 변수에 담기 
		String id = request.getParameter("id");
				
		// db에서 id로 검색해서 삭제 
		MemberService service = new MemberService();
		service.delMember(id);
		
		response.sendRedirect(request.getContextPath() + "/member/logout");
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

 

 

 

다음 작업 -- 사진 일기장 구현 (사진 3개 등록)

https://intheham.tistory.com/68