오전문제 : 게시판 jsp로 만들기
<%@ include %> 디렉티브
<%@ include file="header.jsp" %>
동작 방식
포함된 파일의 내용이 컴파일 시점에 원래 JSP페이지에 복사된다. > 단순히 해당 JSP파일의 내용을 포함하는 역할을 수행
컴파일 시점에 포함되므로, 파일을 변경하면 서버를 다시 컴파일해야 변경 사항이 반영된다.
특징
포함된 파일의 내용이 원래 파일에 복사된다.
변경 사항이 즉각 반영되지 않는다.
정적 리소스(공통 헤더, 푸터)에 사용된다.
<jsp:include>액션태그
<jsp:include page="header.jsp" flush="true" />
동작 방식
포함된 파일이 요청 시점에 원래 JSP 페이지에 포함된다.
요청이 있을 때마다 포함된 파일이 다시 호출되므로, 파일을 변경하면 즉시 변경 사항이 반영 된다.
특징
컴파일 시점 vs. 실행 시점:
<%@ include %>는 컴파일 시점에 포함.<jsp:include>는 실행 시점에 포함.변경 사항 반영:
<%@ include %>는 서버를 다시 컴파일해야 반영.<jsp:include>는 즉시 반영.사용 목적:
<%@ include %>는 정적 콘텐츠에 적합.<jsp:include>는 동적 콘텐츠에 적합.<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
out.print("hello.jsp 입니다.");
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
includeTest.jsp 파일입니다.
<h1>1. 안녕하세요.</h1>
<%@ include file="hello.jsp" %>
<h2>2. 반갑습니다.</h2>
</body>
</html>
a.jsp를 만들자.
그리고 h1태그로 "a.jsp"라고 출력
b.jsp를 만들자.
그리고 h1태그로 "b.jsp"라고 출력
a.jsp에서 b.jsp를 인클루드 하자.
그리고 만들어진 자바파일을 확인하자.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<h1>a.jsp입니다.</h1>
<p>아래는 include 한 파일입니다.</p>
<%@include file="b.jsp"%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<h1>b.jsp입니다.</h1>
</body>
</html>
따로 jdbc에 연결하는 파일을 만들어서 각 파일에 include 해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String driver = "com.mysql.cj.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/project?serverTimezone=UTC";
String mysqlId = "root";
String mysqlPw = "1234";
%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="connInfo.jsp"%>
<%
try{
Class.forName(driver);
} catch(ClassNotFoundException e){
System.out.println("드라이버 로드 실패");
}
%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ include file="conn/createConnection.jsp"%>
<%
request.setCharacterEncoding("UTF-8");
String title = request.getParameter("title");
String name = request.getParameter("name");
String pw = request.getParameter("pw");
String email = request.getParameter("email");
String contents = request.getParameter("contents");
String sql = "INSERT INTO board(title, name, password, email, contents) values(?, ?, ?, ?, ?)";
int result = 0;
try(Connection conn = DriverManager.getConnection(url, mysqlId, mysqlPw);
PreparedStatement pstmt = conn.prepareStatement(sql)){
pstmt.setString(1, title);
pstmt.setString(2, name);
pstmt.setString(3, pw);
pstmt.setString(4, email);
pstmt.setString(5, contents);
result = pstmt.executeUpdate();
if(result > 0) response.sendRedirect("list.jsp");
else response.sendRedirect("error.jsp");
} catch(SQLException e){
e.printStackTrace();
}
%>
이름을 입력받아서 출력하자 js를 이용해 유효성 체크를 하자
입력받는 파일
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<form name="nameForm" action="ex2.jsp" method="post" onsubmit="return check()">
이름 : <input type="text" name="name"> <input type="submit" value="출력">
</form>
<script>
function check() {
var nameForm = document.nameForm;
if (nameForm.name.value == "") {
alert("이름을 입력하세요");
return false;
} else {
return true;
}
}
</script>
</body>
</html>
위 코드에서 input type="submit"에서 onclick으로 함수를 넣으니까 이미 해당 폼을 제출이 되어버려서 input칸이 사라지게된다.
그래서 obsubmit = "return check()을 사용하여 폼이 제출될 때 'check()' 함수가 호출되고, 비어있으면 false를 반환해 폼 제출을 막는다.
입력받은 값 출력하기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
%>
이름 :
<%=request.getParameter("name")%>
</body>
</html>
input 태그의 name 속성을 모르는 상태로 값을 가져와서 값을 출력하시오.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<form action="ex2.jsp" method="post">
<table border="1">
<tr>
<td>제목</td>
<td><input type="text" name="title" required></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pw" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="email" ></td>
</tr>
<tr>
<td>취미</td>
<td>취미 :
<input type="checkbox" name="hobby" value="swimming">수영
<input type="checkbox" name="hobby" value="baseball">야구
<input type="checkbox" name="hobby" value="soccer">축구
<input type="checkbox" name="hobby" value="basketball">농구
</td>
</tr>
<tr>
<td colspan="2"><textarea cols="80" rows="20" style="resize: none"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="등록"> <a href="ex3.jsp"><button>목록</button>
</a></td>
</tr>
</table>
</form>
</body>
</html>
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
Enumeration<String> names = request.getParameterNames();
while(names.hasMoreElements()){
String name = names.nextElement();
String[] values =request.getParameterValues(name);
out.write(name + " : ");
for(int i = 0; i < values.length; i++){
out.print(values[i] + " ");
}
out.write("<br>"); // 한 줄씩 개행
}
%>
</body>
</html>
String[] values 배열 형태로 request.getParameterValues()의 값을 받은 이유는 해당 메소드는 특정 파라미터에 대한 모든 값을 배열로 반환하기 때문에 배열 형태로 값을 받는 것이다. request.getParameterNames()
요청 객체에서 모든 파라미터 이름을 Enumeration<String> 으로 반환한다.
Enumeration은 인터페이스로, 열거된 요소를 한 번에 하나씩 가져올 수 있는 방법을 제공한다.
while문의 hasMoreElements 를 이용해 순차적으로 이름을 가져온다.
nextElement() 메서드를 이용해 변수에 주소값을 넣어서 request.getParameterValues() 메소드를 이용해 해당 이름의 값을 배열에 넣어준다.
request.getParameterValues() : 특정 파라미터 이름에 해당하는 모든 값을 String[]배열로 반환한다.위에서 만든 include 파일을 이용해 파일 하나로 구축했다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시물 개수 세기</title>
</head>
<body>
<%@include file="conn/createConnection.jsp"%>
<%
String sql = "select count(*) from board";
int total = 0;
try (Connection conn = DriverManager.getConnection(url, mysqlId, mysqlPw);
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql)) {
if (rs.next()) {
total = rs.getInt(1);
/*total = rs.getInt("count(*)");*/
System.out.println("게시물 수" + total);
}
} catch (SQLException e) {
e.printStackTrace();
}
%>
게시물 수
<%=total%>
</body>
</html>
System.out.println()은 이클립스 콘솔로 출력된다는 점 유념하자
현재 sql에 저장된 게시물 수는 2개이므로 게시물 수 2 라고 출력된다.
HttpServlet클래스를 상속받는다.
서블릿(Servlet) : 웹 서버에서 동작하는 자바 프로그램으로, 클라이언트의 요청에 대해 동적으로 처리하고 응답을 생성하는 역할을 한다. >> JAVA언어를 기반으로 하는 웹 어플리케이션 기술
서블릿에서는 out은 내장객체가 아니므로, responser.getWriter()메서드를 통해 가져와야한다.
장점
JAVA언어를 기반으로 하므로, JAVA의 모든 API를 사용할 수 있다.
다양한 서버 환경에서도 실행할 수 있다.
MVC패턴을 쉽게 적용할 수 있고, 컨테이너와 밀접한 프로그램을 구현할 수 있다.
create SErvlet에서 java Package는 유일해야 하기 때문에 도메인명을 뒤집어서 하는 경우가 많다. / Class name은 마음대로
URL mappings는 현재 Sevlet클래스에 맵핑시킬 URL을 설정하는 곳이다 후에 edit을 이용해 변경할 수 있다.
package com.ironman.www;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/HiServlet")
public class HiServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public HiServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)//단독으로 실행할 때는 doGet()메소드로 실행해야 한다.
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8"); //따로 위에서 명시하던것을 reponse를 이용해 타입과 언어 명시
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter(); //기본 out객체가 없기 때문에 코코 eponse.getWriter()메소드를 이용해 out객체를 반환시켜 변수에 주소값 저장
out.print("<!doctype html>");
out.print("<html>");
out.print("<head>");
out.print("<title>HelloServlet</title>");
out.print("</head>");
out.print("<body>");
out.print("<h1>Hello Servlet</h1>");
out.print("</body>");
out.print("</html>");
}
}
http://localhost:8080/ServletTest/WEB-INF/classes/com/ironman/www/HiServlet.java http://localhost:8080/ServletTest/HiServlet > 그냥 클래스 이름을 알아서 설정하게 두면 알아서 되는데 따로 설정해놔서 이렇게 url을 설정해야한다.위 코드는 doGet()메소드만 오버라이딩 시켰다.
doGet(): 이 메소드는 HTTP GET 요청을 처리한다. GET요청은 주로 서버에서 정보를 검색하는데 사용된다.doPost() : HTTP POST 요청을 처리한다. POST요청은 주로 클라이언트에서 서버로 데이터를 전송하는데 사용된다.
service() : HTTP 요청의 유형(GET, POST등) 에 따라 적절한 doGet(), doPost()등의 메소드를 호출한다
init() : 서블릿이 초기화할 때 호출된다. 서블릿 컨테이너는 서블릿 객체를 생성하고 초기화할 때 이 메서드를 호출한다.
destroy() : 서블릿이 종료될 때 호출된다. 자원 해제 등의 정리 작업을 수행한다.
doPut() : HTTP PUT 요청을 처리하는 메서드다. 자원 업데이트 요청에 사용된다.
doDelete() : HTTP DELETE요청을 처리하는 메서드다. 자원 삭제 요청에 사용된다.
doHead() : : HTTP HEAD 요청을 처리하는 메서드다. 서버에서 리소스에 대한 메타데이터만 반환할 때 사용된다.
doOptions() : HTTP OPTIONS 요청을 처리하는 메서드다. 서버에서 지원하는 HTTP 메서드 목록을 반환할 때 사용된다.
doTrace() : HTTP TRACE 요청을 처리하는 메서드다. 요청의 진단을 위해 사용된다.
package com.ironman.www;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/HiServlet")
public class HiServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public HiServlet() {
super();
}
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print("<!doctype html>");
out.print("<html>");
out.print("<head>");
out.print("<title>폼 만들기</title>");
out.print("</head>");
out.print("<body>");
out.print("<form action=\"HelloServlet\" method=\"post\">");
// out.println("<form action='HelloOK' method='post'>"); 작은 따옴표로 해도됐던것을...
out.print("<table border = \"1\">");
out.print("<tr>");
out.print("<td>이름 : </td>");
out.print("<td><input type=\"text\" name=\"name\"></td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td>아이디 : </td>");
out.print("<td><input type=\"text\" name=\"id\"></td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td>비밀번호 : </td>");
out.print("<td><input type=\"password\" name=\"password\"></td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td>취미 : </td>");
out.println("<td><input type='checkbox' name='hobby' value='독서'> 독서");
out.println("<input type='checkbox' name='hobby' value='요리'> 요리");
out.println("<input type='checkbox' name='hobby' value='조깅'> 조깅");
out.println("<input type='checkbox' name='hobby' value='수영'> 수영");
out.println("<input type='checkbox' name='hobby' value='취침'> 취침");
// out.print("<td><input type=\"checkbox\" name=\"hobby\" value=\"read\">독서");
// out.print("<input type=\"checkbox\" name=\"hobby\" value=\"yoga\">요가");
// out.print("<input type=\"checkbox\" name=\"hobby\" value=\"jogging\">조깅");
// out.print("<input type=\"checkbox\" name=\"hobby\" value=\"swimmig\">수영");
// out.print("<input type=\"checkbox\" name=\"hobby\" value=\"sleep\">취침");
out.print("</td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td>전공 : </td>");
out.print("<td><input type=\"radio\" name=\"major\" value=\"kor\">국어");
out.print("<input type=\"radio\" name=\"major\" value=\"eng\">영어");
out.print("<input type=\"radio\" name=\"major\" value=\"math\">수학");
out.print("<input type=\"radio\" name=\"major\" value=\"design\">디자인");
out.print("</td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td>프로토콜 : </td>");
out.println("<td>");
out.println("<select name='protocol'>");
out.println("<option>http</option>");
out.println("<option selected>ftp</option>");
out.println("<option>smtp</option>");
out.println("<option>pop</option>");
out.println("</select>");
out.print("</td>");
out.print("</tr>");
out.print("<tr>");
out.print("<td colspan=\"2\"><input type=\"submit\" value=\"전송\"><input type=\"reset\" value=\"초기화\"></td>");
out.print("</tr>");
out.print("</table>");
out.print("</body>");
out.print("</html>");
}
}
post방식을 받아서 화면에 출력하는 파일
package com.ironman.www;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class HelloServlet
*/
@WebServlet(description = "HelloServletTest", urlPatterns = { "/HelloServlet" })//description은 설명
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public HelloServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//doPost메서드로 해야지 post방식을 받을 수 있다.
request.setCharacterEncoding("utf-8"); //request 요청 > 클라이언트가 서버에 정보를 요청 >> post방식으로 넘어오는 데이터를 인코딩
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");//response 응답 > 응답하는 페이지의 데이터를 인코딩
PrintWriter out = response.getWriter();
out.print("<!doctype html>");
out.print("<html>");
out.print("<head>");
out.print("<title>입력 데이터 출력하기</title>");
out.print("</head>");
out.print("<body>");
out.println("이름 : " + request.getParameter("name") +"<br>");
out.println("아이디 : " + request.getParameter("id") +"<br>");
out.println("비밀번호 : " + request.getParameter("password") +"<br>");
out.println("취미 : [");
String[] hobby = request.getParameterValues("hobby");
for(int i=0;i<hobby.length;i++) {
out.println(hobby[i]);
if(i!=hobby.length-1)out.println(", ");
}
out.println("]<br>");
out.println("전공 : " + request.getParameter("major") +"<br>");
out.println("프로토콜 : " + request.getParameter("protocol") +"<br>");
out.print("</body>");
out.print("</html>");
}
}
forward : 클라이언트의 요청을 한 JSP페이지에서 다른 JSP 페이지로 전달하는 기능을 제공한다. > redirect와 유사하지만 조금 다름 아래에서 차이점 설명
웹 애플리케이션을 모듈화하고 작업을 여러 JSP페이지로 분할하는데 유용하다.
요청이 제출되면 브라우저의 URL은 변경되지 않으며 클라이언트는 서버 측 작업을 인식하지 못한다.
forward를 사용하려면 RequestDispather 객체가 필요하며, 이 객체는 request 객체, SevletContext객체를 통해 얻을 수 있다.
RequestDispatcher 객체의 forward()메소드를 호출하여 요청을 전달할 수 있다.forward()메소드는 두 개의 매개변수를 받는다 > HttpServletRequest 객체와 HttpServletResponse객체
forward <> Redirect 차이점
Forward : 웹 컨테이너(서버)내에서만 페이지 이동이 발생한다. 실제로 다른 페이지로 이동했는지 알 수 없다.
request와 response객체를 공유한다. > 다음으로 이동할 URL로 요청 정보를 그대로 전달하며, 사용자가 최초로 요청한 정보는 다음 URL에서도 유효하다.Redirect : 웹 컨테이너(서버)로부터 웹 브라우저에게 다른 페이지로 이동하라는 지시를 내린다. URL을 지시된 주소로 변경하고 해당 주소로 이동한다. >> 새로운 페이지에서는 request와 response객체가 새롭게 생성된다.
sendRedirect()를 이용해 데이터 보내기<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%
request.setAttribute("name", "홍길동");
response.sendRedirect("result.jsp");
%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
이름 : <%=(String)request.getAttribute("name") %>
</body>
</html>
null값으로 나온다.
dispatcher.forward()를 이용해 데이터 보내기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%
request.setAttribute("name", "홍길동");
RequestDispatcher dispatcher = request.getRequestDispatcher("result.jsp");
dispatcher.forward(request, response);
%>
</body>
</html>