새 프로젝트 만들기
<form>태그 - 특정 url로 한방에 전송
쿼리스트링
가장 단순한 전달 방법으로 사용자가 입력한 데이터를 URL의 뒷 부분에 붙여 전달하는 방법
구체척 질의 (예 : ?username=ssar&password=1234)
위와 같은 예시에서 ?를 떼면 application/x-www-form-urlencoded
톰캣으로 정보 받아오기
String username = req.getParameter("username");
String password = req.getParameter("password");
String email = req.getParameter("email");
System.out.println("username : "+username);
System.out.println("password : "+password);
System.out.println("email : "+email);실행 결과
username : ssar
password : 1234
email : ssar@nate.com위와 같은 상황에서 버퍼로 읽어오려고 할 때 다음과 같은 코드로
BufferedReader br = req.getReader();
br.readLine();안 읽히는 이유는 위에 버퍼에서 소비했기 때문
유효성검사
// 2. 유효성 검사 (1000줄 됨)
if(username.length() < 3 || username.length() > 10){
resp.setHeader("Content-Type", "text/html; charset=utf-8");
resp.getWriter().println("<h1>username 글자수가 3-10 사이여야 합니다.");
}
리다이렉트(redirect)
브라우저(클라이언트)가 서버에게 어떤URL을 요청했을 때 서버가 http를 통해 클라이언트로 바뀐 URL을 내려주는것
302 리다이렉션은 페이지를 일시적으로 새 위치로 이동
코드를 재사용 할 수 있다
템플릿 엔진
html은 정적인 언어이기 때문에 주어진 기능 이외에 직접 기능을 추가 할 수는 없다. 이럴 때 html코드에 자바 코드를 섞으면 동적으로 만들 수 있는데 이러한 기능을 할 수 있게 하는 템플릿 엔진이 jsp이다. <% %>로 구분한다.
jsp는 서블릿 형태로 변환되어 실행된다. 서블릿은 자바소스라 jsp에서 자바코드를 사용하는 것이 가능해지는데 view에 비지니스로직이 포함되어 복잡하고 무거워진다.
템플릿 엔진은 서버 사이드 템플릿 엔진, 클라이언트 사이드 템플릿 엔진으로 나뉜다.
서버 사이드 템플릿 엔진
서버에서 가져온 데이터를 템플릿에 넣어 html을 완성시키고 클라이언트에게 전달한다.
jsp도 포함
클라이언트 사이드 템플릿 엔진
브라우저 위에서 html형태로 화면을 생성하고 서버에서 받은 json, xml형식의 데이터를 동적으로 만드는 것
Servlet dispatcher 구현하기
package config;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
// 프론트 컨트롤러와 동일
@WebServlet("*.do")
public class DispatcherServlet extends HttpServlet {
// /user.do
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Content-Type", "text/html; charset=utf-8");
// 1. 공통로직
System.out.println("common logic");
// 2. 분기
String uri = req.getRequestURI();
System.out.println(uri);
if(uri.equals("/join-form.do")){
//resp.sendRedirect("/WEB-INF/user/join-form.jsp");
req.getRequestDispatcher("/WEB-INF/user/join-form.jsp").forward(req, resp);
}else if(uri.equals("/join.do")){
//resp.sendRedirect("/WEB-INF/user/join.jsp");
req.getRequestDispatcher("/WEB-INF/user/join.jsp").forward(req, resp);
}else if(uri.equals("/main.do")){
// resp.sendRedirect("/WEB-INF/board/main.jsp");
req.getRequestDispatcher("/WEB-INF/board/main.jsp").forward(req, resp);
}else {
resp.setStatus(404);
resp.getWriter().println("잘못된 페이지를 요청하셨어요");
}
}
}main.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>main page</h1>
<hr>
</body>
</html>join.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
response.setHeader("Content-Type", "text/html; charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
System.out.println("username : "+username);
System.out.println("password : "+password);
System.out.println("email : "+email);
// 2. 유효성 검사 (1000줄 됨)
if(username.length() < 3 || username.length() > 10){
response.getWriter().println("<h1>username 글자수가 3-10 사이여야 합니다.");
return;
}
// 3. DB연결
// 4. DAO의 insert 메서드를 호출
// 5. 메인 페이지 그리기(비효율적)
// 6. 리다이렉트
//resp.sendRedirect("/main");
response.setStatus(302);
response.setHeader("Location", "/board/main.jsp");
response.setHeader("clock", "/12pm");
%>join-form.jsp
<%@ page import="java.time.LocalDateTime" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
LocalDateTime now = LocalDateTime.now();
%>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>회원가입 페이지 <%=now%></h1>
<hr>
<form action="/WEB-INF/user/join.jsp" method="">
<input type="text" placeholder="username" name="username">
<input type="text" placeholder="password" name="password">
<input type="text" placeholder="email" name="email">
<button>회원가입</button>
</form>
</body>
</html>Share article
